# flake8: noqa
# generated by datamodel-codegen:
#   filename:  api.json.clean
#   timestamp: 2022-08-18T22:27:20+00:00

from __future__ import annotations

from ezcharts.plots.util import JSCode

from typing import Any, Dict, List, Optional, Union

from pydantic import Field

from ezcharts.plots._base import BaseModel

class _StyleName(BaseModel):
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[Union[float, str]] = Field(
        None,
        description='<p>Width of the text block. It is the width of the text by default. In most cases, there is 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',
    )
    height: Optional[Union[float, str]] = Field(
        None,
        description='<p>Height of the text block. 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',
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )


class Rich(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle(BaseModel):
    color: Optional[Any] = Field(
        '#333', description='\n\n<p>main title text color.</p>\n'
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>main title 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'bolder',
        description='\n\n<p>main title 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>main title font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        18, description='\n\n<p>main title font size.</p>\n'
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich] = Field(
        None,
        description='<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',
    )


class _StyleName1(_StyleName):
    pass


class Rich1(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName1] = Field(
        None, alias='<style_name>', description=''
    )


class SubtextStyle(BaseModel):
    color: Optional[Any] = Field(
        '#aaa', description='\n\n<p>subtitle text color.</p>\n'
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>subtitle 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>subtitle 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>subtitle font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>subtitle font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich1] = Field(
        None,
        description='<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',
    )


class Title(BaseModel):
    """
        <p>Title component, including main title and subtitle.</p>
    <p>In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.</p>
    <p><strong>Here are some instances of different animation easing functions, among which every instance has a title component: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-easing&edit=1&reset=1" width="700" height="400"></iframe>




    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the title from showing</p>\n',
    )
    text: Optional[str] = Field(
        '',
        description='\n\n<p>The main title text, supporting for <code class="codespan">\\n</code> for newlines.</p>\n',
    )
    link: Optional[str] = Field(
        '', description='<p>The hyper link of main title text.</p>\n'
    )
    target: Optional[str] = Field(
        'blank',
        description='<p>Open the hyper link of main title in specified tab.</p>\n<p><strong>options: </strong></p>\n<ul>\n<li><p><code class="codespan">&#39;self&#39;</code> opening it in current tab</p>\n</li>\n<li><p><code class="codespan">&#39;blank&#39;</code> opening it in a new tab</p>\n</li>\n</ul>\n',
    )
    textStyle: Optional[TextStyle] = Field(None, description='')
    subtext: Optional[str] = Field(
        '',
        description='\n\n<p>Subtitle text, supporting for <code class="codespan">\\n</code> for newlines.</p>\n',
    )
    sublink: Optional[str] = Field(
        '', description='<p>The hyper link of subtitle text.</p>\n'
    )
    subtarget: Optional[str] = Field(
        'blank',
        description='<p>Open the hyper link of subtitle in specified tab, options:</p>\n<ul>\n<li><p><code class="codespan">&#39;self&#39;</code> opening it in current tab</p>\n</li>\n<li><p><code class="codespan">&#39;blank&#39;</code> opening it in a new tab</p>\n</li>\n</ul>\n',
    )
    subtextStyle: Optional[SubtextStyle] = Field(None, description='')
    textAlign: Optional[str] = Field(
        'auto',
        description='\n\n<p>The horizontal align of the component (including &quot;text&quot; and &quot;subtext&quot;).</p>\n<p>Optional values: <code class="codespan">&#39;auto&#39;</code>, <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;right&#39;</code>, <code class="codespan">&#39;center&#39;</code>.</p>\n',
    )
    textVerticalAlign: Optional[str] = Field(
        'auto',
        description='\n\n<p>The vertical align of the component (including &quot;text&quot; and &quot;subtext&quot;).</p>\n<p>Optional values: <code class="codespan">&#39;auto&#39;</code>, <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;bottom&#39;</code>, <code class="codespan">&#39;middle&#39;</code>.</p>\n',
    )
    triggerEvent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code> to enable triggering events</p>\n',
    )
    padding: Optional[Union[float, Any]] = Field(
        5,
        description='\n\n<p>title space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples:</p>\n<pre><code class="lang-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',
    )
    itemGap: Optional[float] = Field(
        10, description='\n\n<p>The gap between the main title and subtitle.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between title  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between title  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between title  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between title  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    backgroundColor: Optional[Any] = Field(
        'transparent',
        description='\n\n<p>Background color of title, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class="codespan">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class="codespan">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class="codespan">&#39;#ccc&#39;</code>.</p>\n</blockquote>\n',
    )
    borderColor: Optional[Any] = Field(
        '#ccc',
        description='\n\n<p>Border color of title. Support the same color format as backgroundColor.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1, description='\n\n<p>Border width of title.</p>\n'
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0,
        description='\n\n<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> is configured and <code class="codespan">backgroundColor</code> is defined other than <code class="codespan">transparent</code>.</p>\n',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> configured.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> configured.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> configured.</p>\n',
    )


class Decal(BaseModel):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'rect',
        description='<p>The symbol type of the decal. If it is in the type of <code class="codespan">string[]</code>, it means the symbols are used one by one.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class="codespan">&#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>',
    )
    symbolSize: Optional[float] = Field(
        1,
        description='<p>Range of values: <code class="codespan">0</code> to <code class="codespan">1</code>, representing the size of symbol relative to decal.</p>\n',
    )
    symbolKeepAspect: Optional[bool] = Field(
        True,
        description='<p>Whether or not to keep the aspect ratio of the pattern.</p>\n',
    )
    color: Optional[str] = Field(
        'rgba(0, 0, 0, 0.2)',
        description='<p>For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.</p>\n',
    )
    backgroundColor: Optional[str] = Field(
        None,
        description='<p>The background color of the decal will be over the color of the series itself, under the decal pattern.</p>\n',
    )
    dashArrayX: Optional[Union[float, Any]] = Field(
        5,
        description='<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class="codespan">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class="codespan">dashArrayX</code> controls the horizontal pattern pattern. When its value is of type <code class="codespan">number</code> or <code class="codespan">number[]</code>, it is similar to <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is of type <code class="codespan">number</code>, it means that the pattern and the blank space are of this value respectively. For example, <code class="codespan">5</code> means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class="codespan">number[]</code> type, it means that the pattern and empty space are loops of an array of values. For example: <code class="codespan">[5, 10, 2, 6]</code> means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...</p>\n</li>\n<li><p>If of type <code class="codespan">(number | number[])[]</code>, it means that each row is a loop with an array of values for the pattern and blank space. For example: <code class="codespan">[10, [2, 5]]</code> means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1" width="700" height="300"></iframe>\n\n',
    )
    dashArrayY: Optional[Union[float, Any]] = Field(
        5,
        description='<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class="codespan">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class="codespan">dashArrayY</code> controls the horizontal pattern pattern. Similar to <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is a <code class="codespan">number</code> type, it means the pattern and the blank are each of this value. For example, <code class="codespan">5</code> means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class="codespan">number[]</code> type, it means that the pattern and empty space are loops of sequential array values. For example: <code class="codespan">[5, 10, 2, 6]</code> means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1" width="700" height="300"></iframe>\n\n',
    )
    rotation: Optional[float] = Field(
        0,
        description='<p>The overall rotation angle (in radians) of the pattern, in the range from `-Math.</p>\n',
    )
    maxTileWidth: Optional[float] = Field(
        512,
        description='<p>The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.</p>\n',
    )
    maxTileHeight: Optional[float] = Field(
        512,
        description='<p>The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.</p>\n',
    )


class ItemStyle(BaseModel):
    """
    <p>Legend item style. If its children have values as <code class="codespan">&#39;inherit&#39;</code>, the values are inherited from corresponding series options.</p>

    """

    color: Optional[Any] = Field(
        'inherit',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        'inherit',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        'auto',
        description='\n\n<p> border width. No border when it is set to be 0.</p>\n<p>When its value is <code class="codespan">&quot;auto&quot;</code>, if there is <code class="codespan">borderWidth</code> in series, then it is set to be 2, otherwise, it is set to be 0. If its value is <code class="codespan">&quot;inherit&quot;</code>, then the <code class="codespan">borderWidth</code> of the series are always used</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'inherit',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        'inherit',
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'inherit',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'inherit',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        'inherit',
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        'inherit',
        description='\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',
    )
    decal: Optional[Decal] = Field(
        'inherit',
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class LineStyle(BaseModel):
    """
    <p>Legend line style. If its children have values as <code class="codespan">&#39;inherit&#39;</code>, the values are inherited from corresponding series options.</p>

    """

    color: Optional[Any] = Field(
        'inherit',
        description='\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',
    )
    width: Optional[float] = Field('auto', description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'inherit',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        'inherit',
        description='<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',
    )
    cap: Optional[str] = Field(
        'inherit',
        description='<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',
    )
    join: Optional[str] = Field(
        'inherit',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        'inherit',
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        'inherit',
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        'inherit',
        description='\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',
    )


class _StyleName2(_StyleName):
    pass


class Rich2(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName2] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle1(BaseModel):
    """
    <p>Legend text style.</p>

    """

    color: Optional[Any] = Field('#333', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich2] = Field(
        None,
        description='<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',
    )


class Decal1(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle1(BaseModel):
    """
    <p>Legend Item item style. If its children have values as <code class="codespan">&#39;inherit&#39;</code>, the values are inherited from corresponding series options.</p>

    """

    color: Optional[Any] = Field(
        'inherit',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        'inherit',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        'auto',
        description='\n\n<p> border width. No border when it is set to be 0.</p>\n<p>When its value is <code class="codespan">&quot;auto&quot;</code>, if there is <code class="codespan">borderWidth</code> in series, then it is set to be 2, otherwise, it is set to be 0. If its value is <code class="codespan">&quot;inherit&quot;</code>, then the <code class="codespan">borderWidth</code> of the series are always used</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'inherit',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        'inherit',
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'inherit',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'inherit',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        'inherit',
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        'inherit',
        description='\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',
    )
    decal: Optional[Decal1] = Field(
        'inherit',
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class LineStyle1(LineStyle):
    """
    <p>Legend Item line style. If its children have values as <code class="codespan">&#39;inherit&#39;</code>, the values are inherited from corresponding series options.</p>

    """

    pass


class Datum(BaseModel):
    name: Optional[str] = Field(
        None,
        description='<p>Name of legend, which should be the <code class="codespan">name</code> value of a certain series. If it is a pie chart, legend name can also be the name of a single data item.</p>\n',
    )
    icon: Optional[str] = Field(
        None,
        description='<p>Icon of the legend.</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>',
    )
    itemStyle: Optional[ItemStyle1] = Field(
        None,
        description='<p>Legend Item item style. If its children have values as <code class="codespan">&#39;inherit&#39;</code>, the values are inherited from corresponding series options.</p>\n',
    )
    lineStyle: Optional[LineStyle1] = Field(
        None,
        description='<p>Legend Item line style. If its children have values as <code class="codespan">&#39;inherit&#39;</code>, the values are inherited from corresponding series options.</p>\n',
    )
    symbolRotate: Optional[Union[float, str]] = Field(
        'inherit',
        description='<p>Rotation of the symbol, which can be <code class="codespan">number | &#39;inherit&#39;</code>. If it&#39;s <code class="codespan">&#39;inherit&#39;</code>, <code class="codespan">symbolRotate</code> of the series will be used.</p>\n',
    )
    textStyle: Optional[Any] = Field(None, description='<p>Text style of legend.</p>\n')


class PageIcons(BaseModel):
    """
        <p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>
    <p>The icons of page buttons.</p>

    """

    horizontal: Optional[Any] = Field(
        None,
        description='<p>The icons of page buttons when <a href="#legend.orient">legend.orient</a> is <code class="codespan">&#39;horizontal&#39;</code>.</p>\n<p>It should be an array, <code class="codespan">[previous page button, next page button]</code>, <code class="codespan">[&#39;M0,0L12,-10L12,10z&#39;, &#39;M0,0L-12,-10L-12,10z&#39;]</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code 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>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )
    vertical: Optional[Any] = Field(
        None,
        description='<p>The icons of page buttons when <a href="#legend.orient">legend.orient</a> is <code class="codespan">&#39;vertical&#39;</code>.</p>\n<p>It should be an array, <code class="codespan">[previous page button, next page button]</code>, <code class="codespan">[&#39;M0,0L20,0L10,-20z&#39;, &#39;M0,0L20,0L10,20z&#39;]</code> by default.</p>\n<p>For the each item of the array,</p>\n<p>It can be set to an image with <code 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>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )


class PageTextStyle(BaseModel):
    """
        <p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>
    <p>The text style of page info.</p>

    """

    color: Optional[Any] = Field('#333', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )


class _StyleName3(BaseModel):
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[Union[float, str]] = Field(
        None,
        description='<p>Width of the text block. It is the width of the text by default. In most cases, there is 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',
    )
    height: Optional[Union[float, str]] = Field(
        None,
        description='<p>Height of the text block. 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',
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )


class Rich3(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName3] = Field(
        None, alias='<style_name>', description=''
    )


class SelectorLabel(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.4.0</code></p>
    </blockquote>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich3] = Field(
        None,
        description='<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',
    )


class Emphasis(BaseModel):
    selectorLabel: Optional[SelectorLabel] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.4.0</code></p>\n</blockquote>\n',
    )


class _StyleName4(_StyleName3):
    pass


class Rich4(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName4] = Field(
        None, alias='<style_name>', description=''
    )


class SelectorLabel1(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.4.0</code></p>
    </blockquote>
    <p>The text label style of the selector button, which is displayed by default.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich4] = Field(
        None,
        description='<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',
    )


class Legend(BaseModel):
    """
        <p>Legend component.</p>
    <p>Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.</p>
    <p>In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.</p>
    <p>If there have to be too many legend items, <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a> are options to paginate them. Check <a href="#legend.type">legend.type</a> please.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Type of legend. Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;plain&#39;</code>: Simple legend. (default)</li>\n<li><code class="codespan">&#39;scroll&#39;</code>: Scrollable legend. It helps when too many legend items needed to be shown.</li>\n</ul>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n<p>When <code class="codespan">&#39;scroll&#39;</code> used, these options below can be used for detailed configuration:</p>\n<ul>\n<li><a href="#legend.scrollDataIndex">legend.scrollDataIndex</a></li>\n<li><a href="#legend.pageButtonItemGap">legend.pageButtonItemGap</a></li>\n<li><a href="#legend.pageButtonGap">legend.pageButtonGap</a></li>\n<li><a href="#legend.pageButtonPosition">legend.pageButtonPosition</a></li>\n<li><a href="#legend.pageFormatter">legend.pageFormatter</a></li>\n<li><a href="#legend.pageIcons">legend.pageIcons</a></li>\n<li><a href="#legend.pageIconColor">legend.pageIconColor</a></li>\n<li><a href="#legend.pageIconInactiveColor">legend.pageIconInactiveColor</a></li>\n<li><a href="#legend.pageIconSize">legend.pageIconSize</a></li>\n<li><a href="#legend.pageTextStyle">legend.pageTextStyle</a></li>\n<li><a href="#legend.animation">legend.animation</a></li>\n<li><a href="#legend.animationDurationUpdate">legend.animationDurationUpdate</a></li>\n</ul>\n',
    )
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    show: Optional[bool] = Field(True, description='\n\n\n\n\n\n\n\n')
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between legend component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between legend component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between legend component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between legend component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        'auto', description='<p>Width of legend component. Adaptive by default.</p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        'auto', description='<p>Height of legend component. Adaptive by default.</p>\n'
    )
    orient: Optional[str] = Field(
        'horizontal',
        description='\n\n<p>The layout orientation of legend.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n',
    )
    align: Optional[str] = Field(
        'auto',
        description='\n\n<p>Legend marker and text aligning. By default, it automatically calculates from component location and orientation. When <a href="#legend.left">left</a> value of this component is &#39;right&#39;, and the vertical layout (<a href="#legend.orient">orient</a> is &#39;vertical&#39;), it would be aligned to &#39;right&#39;.</p>\n<p>Option:</p>\n<ul>\n<li>&#39;auto&#39;</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n</ul>\n',
    )
    padding: Optional[Union[float, Any]] = Field(
        5,
        description='\n\n\n\n\n\n<p>legend space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples:</p>\n<pre><code class="lang-ts">// Set padding to be 5\npadding: 5\n// Set the top and bottom paddings to be 5, and left and right paddings to be 10\npadding: [5, 10]\n// Set each of the four paddings seperately\npadding: [\n    5,  // up\n    10, // right\n    5,  // down\n    10, // left\n]\n</code></pre>\n',
    )
    itemGap: Optional[float] = Field(
        10,
        description='\n\n<p>The distance between each legend, horizontal distance in horizontal layout, and vertical distance in vertical layout.</p>\n',
    )
    itemWidth: Optional[float] = Field(
        25, description='\n\n<p>Image width of legend symbol.</p>\n'
    )
    itemHeight: Optional[float] = Field(
        14, description='\n\n<p>Image height of legend symbol.</p>\n'
    )
    itemStyle: Optional[ItemStyle] = Field(
        None,
        description='<p>Legend item style. If its children have values as <code class="codespan">&#39;inherit&#39;</code>, the values are inherited from corresponding series options.</p>\n',
    )
    lineStyle: Optional[LineStyle] = Field(
        None,
        description='<p>Legend line style. If its children have values as <code class="codespan">&#39;inherit&#39;</code>, the values are inherited from corresponding series options.</p>\n',
    )
    symbolRotate: Optional[Union[float, str]] = Field(
        'inherit',
        description='<p>Rotation of the symbol, which can be <code class="codespan">number | &#39;inherit&#39;</code>. If it&#39;s <code class="codespan">&#39;inherit&#39;</code>, <code class="codespan">symbolRotate</code> of the series will be used.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter is used to format label of legend, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// using string template, the template variable is legend name {name}\nformatter: &#39;Legend {name}&#39;\n// using callback function\nformatter: function (name) {\n    return &#39;Legend &#39; + name;\n}\n</code></pre>\n',
    )
    selectedMode: Optional[Union[str, bool]] = Field(
        True,
        description='\n\n<p>Selected mode of legend, which controls whether series can be toggled displaying by clicking legends. It is enabled by default, and you may set it to be <code class="codespan">false</code> to disable it.</p>\n<p>Besides, it can be set to <code class="codespan">&#39;single&#39;</code> or <code class="codespan">&#39;multiple&#39;</code>, for single selection and multiple selection.</p>\n',
    )
    inactiveColor: Optional[Any] = Field(
        '#ccc', description='\n\n<p>Legend color when not selected.</p>\n'
    )
    inactiveBorderColor: Optional[Any] = Field(
        '#ccc', description='\n\n<p>Legend border color when not selected.</p>\n'
    )
    inactiveBorderWidth: Optional[Any] = Field(
        'auto',
        description='\n\n<p>Legend border width when not selected. If it is <code class="codespan">&#39;auto&#39;</code>, the border width is set to be 2 if there is border width in the series, 0 elsewise. If it is <code class="codespan">&#39;inherit&#39;</code>, it always takes the border width of the series.</p>\n',
    )
    selected: Optional[Any] = Field(
        None,
        description='<p>State table of selected legend.</p>\n<p>example:</p>\n<pre><code>selected: {\n    // selected&#39;series 1&#39;\n    &#39;series 1&#39;: true,\n    // unselected&#39;series 2&#39;\n    &#39;series 2&#39;: false\n}\n</code></pre>',
    )
    textStyle: Optional[TextStyle1] = Field(
        None, description='<p>Legend text style.</p>\n'
    )
    tooltip: Optional[Any] = Field(
        None,
        description='<p>Tooltip configuration for legend tooltip, which is similar to <a href="#tooltip">tooltip</a>.</p>\n',
    )
    icon: Optional[str] = Field(
        None,
        description='\n\n<p>Icon of the legend items.</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>',
    )
    data: Optional[List[Datum]] = Field(
        None,
        description='<p>Data array of legend. An array item is usually a <code class="codespan">name</code> representing string. (If it is a <a href="#series-pie">pie chart</a>, it could also be the <code class="codespan">name</code> of a single data in the pie chart) of a series. Legend component would automatically calculate the color and icon according to series. Special string <code class="codespan">&#39;&#39;</code> (null string) or <code class="codespan">&#39;\\n&#39;</code> (new line string) can be used for a new line.</p>\n<p>If <code class="codespan">data</code> is not specified, it will be auto collected from series. For most of series, it will be collected from <a href="#series.name">series.name</a> or the dimension name specified by <code class="codespan">seriesName</code> of <a href="#series.encode">series.encode</a>. For some types of series like <a href="#series-pie">pie</a> and <a href="#series-funnel">funnel</a>, it will be collected from the name field of <code class="codespan">series.data</code>.</p>\n<p>If you need to set the style for a single item, you may also set the configuration of it. In this case, <code class="codespan">name</code> attribute is used to represent name of <code class="codespan">series</code>.</p>\n<p>Example:</p>\n<pre><code>data: [{\n    name: &#39;series 1&#39;,\n    // compulsorily set icon as a circle\n    icon: &#39;circle&#39;,\n    // set up the text in red\n    textStyle: {\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>',
    )
    backgroundColor: Optional[Any] = Field(
        'transparent',
        description='\n\n<p>Background color of legend, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class="codespan">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class="codespan">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class="codespan">&#39;#ccc&#39;</code>.</p>\n</blockquote>\n',
    )
    borderColor: Optional[Any] = Field(
        '#ccc',
        description='\n\n<p>Border color of legend. Support the same color format as backgroundColor.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1, description='\n\n<p>Border width of legend.</p>\n'
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0,
        description='\n\n<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> is configured and <code class="codespan">backgroundColor</code> is defined other than <code class="codespan">transparent</code>.</p>\n',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> configured.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> configured.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> configured.</p>\n',
    )
    scrollDataIndex: Optional[float] = Field(
        0,
        description='<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p><code class="codespan">dataIndex</code> of the left top most displayed item.</p>\n<p>Although the scrolling of legend items can be controlled by calling <code class="codespan">setOption</code> and specifying this property, we suggest that do not control legend in this way unless necessary (<code class="codespan">setOption</code> might be time-consuming), but just use action <a href="api.html#action.legend.legendScroll" target="_blank">legendScroll</a> to do that.</p>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )
    pageButtonItemGap: Optional[float] = Field(
        5,
        description='<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p>The gap between page buttons and page info text.</p>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )
    pageButtonGap: Optional[float] = Field(
        None,
        description='<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p>The gap between page buttons and legend items.</p>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )
    pageButtonPosition: Optional[str] = Field(
        'end',
        description='<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p>The position of page buttons and page info. Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;start&#39;</code>: on the left or top.</li>\n<li><code class="codespan">&#39;end&#39;</code>: on the right or bottom.</li>\n</ul>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )
    pageFormatter: Optional[Union[str, Any]] = Field(
        '{current}/{total}',
        description='<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p>Page info formatter. It is <code class="codespan">&#39;{current}/{total}&#39;</code> by default, where <code class="codespan">{current}</code> is current page number (start from 1), and <code class="codespan">{total}</code> is the total page number.</p>\n<p>If <code class="codespan">pageFormatter</code> is a function, it should return a string. The parameters is:</p>\n<pre><code class="lang-ts">{\n    current: number\n    total: number\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )
    pageIcons: Optional[PageIcons] = Field(
        None,
        description='<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p>The icons of page buttons.</p>\n',
    )
    pageIconColor: Optional[str] = Field(
        '#2f4554',
        description='\n\n<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p>The color of page buttons.</p>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )
    pageIconInactiveColor: Optional[str] = Field(
        '#aaa',
        description='\n\n<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p>The color of page buttons when they are inactive.</p>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )
    pageIconSize: Optional[Union[float, Any]] = Field(
        15,
        description='\n\n<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p>The size of page buttons. It can be a number, or an array, like <code class="codespan">[10, 3]</code>, represents <code class="codespan">[width, height]</code>.</p>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a>.</p>\n',
    )
    pageTextStyle: Optional[PageTextStyle] = Field(
        None,
        description='<p>It works when <a href="#legend.type">legend.type</a> is <code class="codespan">&#39;scroll&#39;</code>.</p>\n<p>The text style of page info.</p>\n',
    )
    animation: Optional[bool] = Field(
        None, description='\n\n<p>Whether to use animation when page scrolls.</p>\n'
    )
    animationDurationUpdate: Optional[float] = Field(
        800, description='\n\n<p>Duration of the page scroll animation.</p>\n'
    )
    emphasis: Optional[Emphasis] = Field(None, description='')
    selector: Optional[Union[bool, Any]] = Field(
        False,
        description='<blockquote>\n<p>Since <code class="codespan">v4.4.0</code></p>\n</blockquote>\n<p>The selector button in the legend component. Currently includes both a full selection and an inverse selection. The selector button doesn&#39;t display by default, the user can manually configure it.</p>\n<p>Usage:</p>\n<pre><code class="lang-ts">selector: [\n    {\n        type: &#39;all or inverse&#39;,\n        // can be any title you like\n        title: &#39;All&#39;\n    },\n    {\n        type: &#39;inverse&#39;,\n        title: &#39;Inv&#39;\n    }\n]\n\n// or\nselector: true\n\n// or\nselector: [&#39;all&#39;, &#39;inverse&#39;]\n</code></pre>\n',
    )
    selectorLabel: Optional[SelectorLabel1] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.4.0</code></p>\n</blockquote>\n<p>The text label style of the selector button, which is displayed by default.</p>\n',
    )
    selectorPosition: Optional[str] = Field(
        'auto',
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v4.4.0</code></p>\n</blockquote>\n<p>The position of the selector button, which can be placed at the end or start of the legend component, the corresponding values are <code class="codespan">&#39;end&#39;</code> and <code class="codespan">&#39;start&#39;</code>. By default, when the legend is laid out horizontally, the selector is placed at the end of it, and when the legend is laid out vertically, the selector is placed at the start of it.</p>\n',
    )
    selectorItemGap: Optional[float] = Field(
        7,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v4.4.0</code></p>\n</blockquote>\n<p>The gap between the selector button.</p>\n',
    )
    selectorButtonGap: Optional[float] = Field(
        10,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v4.4.0</code></p>\n</blockquote>\n<p>The gap between selector button and legend component.</p>\n',
    )


class Label(BaseModel):
    """
    <p>label of axisPointer</p>

    """

    show: Optional[bool] = Field(
        False,
        description='<p>Whether show label. Label will not show by default. But if <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> is set as  <code class="codespan">&#39;cross&#39;</code>, label will be displayed automatically.</p>\n',
    )
    precision: Optional[Union[float, str]] = Field(
        'auto',
        description='<p>The precision of value in label. It is auto determined by default. You can also set it as <code class="codespan">&#39;2&#39;</code>, which indicates that two decimal fractions are reserved.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The formatter of label.</p>\n<p>If set as <code class="codespan">string</code>, for example it can be: <code class="codespan">formatter: &#39;some text {value} some text</code>, where <code class="codespan">{value}</code> will be replaced by axis value automatically.</p>\n<p>If set as <code class="codespan">function</code>:</p>\n<p><strong>Parameters:</strong></p>\n<p><code class="codespan">{Object}</code> params: Including fields as follows:</p>\n<p><code class="codespan">{Object}</code> params.value: current value of this axis. If <code class="codespan">axis.type</code> is <code class="codespan">&#39;category&#39;</code>, it is one of the value in <code class="codespan">axis.data</code>. If <code class="codespan">axis.type</code> is <code class="codespan">&#39;time&#39;</code>, it is a timestamp.</p>\n<p><code class="codespan">{Array.&lt;Object&gt;}</code> params.seriesData: An array, containing info of nearest points. Each item is:</p>\n<p><code class="codespan">{string}</code> params.axisDimension: The dimension name of the axis. For example, in catesian it will be <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, and in polar it will be <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code>.</p>\n<p><code class="codespan">{number}</code> params.axisIndex: The index of the axis, for example, <code class="codespan">0</code>,<code class="codespan">1</code>, <code class="codespan">2</code>, ...</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>Each item also includes axis infomation:</p>\n<pre><code class="lang-ts">{\n    axisDim: &#39;x&#39;, // &#39;x&#39;, &#39;y&#39;, &#39;angle&#39;, &#39;radius&#39;, &#39;single&#39;\n    axisId: &#39;xxx&#39;,\n    axisName: &#39;xxx&#39;,\n    axisIndex: 3,\n    axisValue: 121, // The current value of axisPointer\n    axisValueLabel: &#39;text of value&#39;\n}\n</code></pre>\n<p><strong>Return:</strong></p>\n<p>The string to be displayed.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">formatter: function (params) {\n    // If axis.type is &#39;time&#39;\n    return &#39;some text&#39; + echarts.format.formatTime(params.value);\n}\n</code></pre>\n',
    )
    margin: Optional[float] = Field(
        3, description='<p>Distance between label and axis.</p>\n'
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    padding: Optional[Union[str, Any]] = Field(
        '[5, 7, 5, 7]',
        description='\n\n<p>axisPointer space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples:</p>\n<pre><code class="lang-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',
    )
    backgroundColor: Optional[str] = Field(
        'auto',
        description='<p>Background color of label, the same as <a href="#xAxis.axisLine.lineStyle.color">axis.axisLine.lineStyle.color</a> by default.</p>\n',
    )
    borderColor: Optional[str] = Field(
        None, description='<p>Border color of label.</p>\n'
    )
    borderWidth: Optional[str] = Field(0, description='<p>Border width of label.</p>\n')
    shadowBlur: Optional[float] = Field(
        3,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        '#aaa',
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )


class LineStyle2(BaseModel):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    color: Optional[Any] = Field(
        '#555',
        description='\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',
    )
    width: Optional[float] = Field(1, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class ShadowStyle(BaseModel):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    color: Optional[Any] = Field(
        'rgba(150,150,150,0.3)',
        description='\n\n<p>Fill 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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class CrossStyle(BaseModel):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;cross&#39;</code>.</p>

    """

    color: Optional[Any] = Field(
        '#555',
        description='\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',
    )
    width: Optional[float] = Field(1, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'dashed',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AxisPointer(BaseModel):
    """
        <p>Configuration item for axisPointer.</p>
    <p><code class="codespan">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href="#xAxis.axisPointer">xAxis.axisPointer</a> or <a href="#angleAxis.axisPointer">angleAxis.axisPointer</a>). More detailed features can be configured on <code class="codespan">someAxis.axisPointer</code>. But in common cases, using <code class="codespan">tooltip.axisPointer</code> is more convenient.</p>
    <blockquote>
    <p><strong>Notice:</strong> configurations of <code class="codespan">tooltip.axisPointer</code> has lower priority than that of <code class="codespan">someAxis.axisPointer</code>.</p>
    </blockquote>
    <hr>
    <p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>
    <p>For example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>


    <p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>
    <p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>


    <p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>

    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>



    <hr>
    <blockquote>
    <p><strong>Notice:</strong>
    Generally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>
    </blockquote>
    <blockquote>
    <p>But these configurations can only be configured in global axisPointer:
    <a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>
    </blockquote>
    <hr>
    <hr>
    <p><strong>How to display axisPointer:</strong></p>
    <p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>
    <p>Those axisPointer will not be displayed by default, utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to display the label of axisPointer:</strong></p>
    <p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to configure axisPointer on touch device:</strong></p>
    <p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>
    <p><strong>Notice:</strong>
    If tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>
    <p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>
    <hr>
    <p><strong>Snap to point</strong></p>
    <p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>
    <hr>

    """

    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class="codespan">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n',
    )
    axis: Optional[str] = Field(
        'auto',
        description='<p>The coordinate axis, which could be <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, or <code class="codespan">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle2] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    crossStyle: Optional[CrossStyle] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;cross&#39;</code>.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        200,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'exponentialOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class TextStyle2(BaseModel):
    """
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(14, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )


class Tooltip(BaseModel):
    """
        <p>tooltip settings in the coordinate system component.</p>
    <p><strong>General Introduction:</strong></p>
    <p>tooltip can be configured on different places:</p>
    <ul>
    <li><p>Configured on global: <a href="#tooltip">tooltip</a></p>
    </li>
    <li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>
    </li>
    <li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>
    </li>
    <li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>
    </li>
    </ul>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show the tooltip component.</p>\n<p>including tooltip floating layer and <a href="#tooltip.axisPointer">axisPointer</a>.</p>\n',
    )
    trigger: Optional[str] = Field(
        'item',
        description='\n\n<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class="codespan">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href="#grid">grid</a> or <a href="#polar">polar</a>. Also, you may assign axis with <a href="#tooltip.axisPointer.axis">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n',
    )
    axisPointer: Optional[AxisPointer] = Field(
        None,
        description='<p>Configuration item for axisPointer.</p>\n<p><code class="codespan">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href="#xAxis.axisPointer">xAxis.axisPointer</a> or <a href="#angleAxis.axisPointer">angleAxis.axisPointer</a>). More detailed features can be configured on <code class="codespan">someAxis.axisPointer</code>. But in common cases, using <code class="codespan">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class="codespan">tooltip.axisPointer</code> has lower priority than that of <code class="codespan">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>\n\n\n<p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n',
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code 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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<p>The background color of tooltip&#39;s floating layer.</p>\n',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\n\n\n\n\n\n\n\n\n\n<p>The border color of tooltip&#39;s floating layer.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n\n\n\n\n\n\n\n\n<p>The border width of tooltip&#39;s floating layer.</p>\n',
    )
    padding: Optional[float] = Field(
        5,
        description='\n\n\n\n\n\n\n\n\n\n\n\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',
    )
    textStyle: Optional[TextStyle2] = Field(
        None, description='<p>The text syle of tooltip&#39;s floating layer.</p>\n'
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\n\n\n\n\n\n\n\n\n\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',
    )


class Grid(BaseModel):
    """
        <p>Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. <a href="#series-line">Line chart</a>, <a href="#series-bar">bar chart</a>, and <a href="#series-scatter">scatter chart (bubble chart)</a> can be drawn in grid.</p>
    <p>In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.</p>
    <p><strong>Following is an example of Anscombe Quartet:</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=scatter-anscombe-quartet&edit=1&reset=1" width="600" height="400"></iframe>




    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    show: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to show the grid in rectangular coordinate.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        '10%',
        description='<p>Distance between grid  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        60,
        description='<p>Distance between grid  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        '10%',
        description='<p>Distance between grid  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        60,
        description='<p>Distance between grid  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        'auto', description='<p>Width of grid  component. Adaptive by default.</p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        'auto', description='<p>Height of grid  component. Adaptive by default.</p>\n'
    )
    containLabel: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether the grid region contains <a href="#yAxis.axisLabel">axis tick label</a> of axis.</p>\n<ul>\n<li>When containLabel is <code class="codespan">false</code>:<ul>\n<li><code class="codespan">grid.left</code> <code class="codespan">grid.right</code> <code class="codespan">grid.top</code> <code class="codespan">grid.bottom</code> <code class="codespan">grid.width</code> <code class="codespan">grid.height</code> decide the location and size of the rectangle that is made of by xAxis and yAxis.</li>\n<li>Setting to <code class="codespan">false</code> will help when multiple grids need to be aligned at their axes.</li>\n</ul>\n</li>\n<li>When containLabel is <code class="codespan">true</code>:<ul>\n<li><code class="codespan">grid.left</code> <code class="codespan">grid.right</code> <code class="codespan">grid.top</code> <code class="codespan">grid.bottom</code> <code class="codespan">grid.width</code> <code class="codespan">grid.height</code> decide the location and size of the rectangle that contains the axes and the labels of the axes.</li>\n<li>Setting to <code class="codespan">true</code> will help when the length of axis labels is dynamic and is hard to approximate. This will avoid labels from overflowing the container or overlapping other components.</li>\n</ul>\n</li>\n</ul>\n',
    )
    backgroundColor: Optional[Any] = Field(
        'transparent',
        description='\n\n<p>Background color of grid, which is transparent by default.</p>\n<blockquote>\n<p>Color can be represented in RGB, for example <code class="codespan">&#39;rgb(128, 128, 128)&#39;</code>. RGBA can be used when you need alpha channel, for example <code class="codespan">&#39;rgba(128, 128, 128, 0.5)&#39;</code>. You may also use hexadecimal format, for example <code class="codespan">&#39;#ccc&#39;</code>.</p>\n</blockquote>\n<p><strong>Attention</strong>: Works only if <code class="codespan">show: true</code> is set.</p>\n',
    )
    borderColor: Optional[Any] = Field(
        '#ccc',
        description='\n\n<p>Border color of grid. Support the same color format as backgroundColor.</p>\n<p><strong>Attention</strong>: Works only if <code class="codespan">show: true</code> is set.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\n\n<p>Border width of grid.</p>\n<p><strong>Attention</strong>: Works only if <code class="codespan">show: true</code> is set.</p>\n',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> is configured and <code class="codespan">backgroundColor</code> is defined other than <code class="codespan">transparent</code>.</p>\n',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> configured.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> configured.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n<p><strong>Attention</strong>: This property works only if <code class="codespan">show: true</code> configured.</p>\n',
    )
    tooltip: Optional[Tooltip] = Field(
        None,
        description='<p>tooltip settings in the coordinate system component.</p>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href="#tooltip">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>\n</li>\n</ul>\n',
    )


class _StyleName5(BaseModel):
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[Union[float, str]] = Field(
        None,
        description='<p>Width of the text block. It is the width of the text by default. In most cases, there is 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',
    )
    height: Optional[Union[float, str]] = Field(
        None,
        description='<p>Height of the text block. 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',
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n\n'
    )


class Rich5(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName5] = Field(
        None, alias='<style_name>', description=''
    )


class NameTextStyle(BaseModel):
    """
    <p>Text style of axis name.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Color of axis name uses <a href="#xAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>axis name font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich5] = Field(
        None,
        description='<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',
    )


class LineStyle3(BaseModel):
    color: Optional[Any] = Field(
        '#333',
        description='\n\n<p>line styleLine 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',
    )
    width: Optional[float] = Field(1, description='\n\n<p>line style line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AxisLine(BaseModel):
    """
    <p>Settings related to axis line.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis line from showing.</p>\n',
    )
    onZero: Optional[bool] = Field(
        True,
        description='\n\n<p>Specifies whether X or Y axis lies on the other&#39;s origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.</p>\n',
    )
    onZeroAxisIndex: Optional[float] = Field(
        None,
        description='<p>When mutiple axes exists, this option can be used to specify which axis can be &quot;onZero&quot; to.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'none',
        description='\n\n<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class="codespan">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class="codespan">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class="codespan">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n',
    )
    symbolSize: Optional[Any] = Field(
        '[10, 15]',
        description='\n\n<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n',
    )
    symbolOffset: Optional[Union[Any, float]] = Field(
        '[0, 0]',
        description='\n\n<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n',
    )
    lineStyle: Optional[LineStyle3] = Field(None, description='')


class LineStyle4(BaseModel):
    """
    <p>Line style of axis ticks.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='<p>Color of axis label is set to be <a href="#xAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>axisTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class AxisTick(BaseModel):
    """
    <p>Settings related to axis tick.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis tick from showing.</p>\n',
    )
    alignWithLabel: Optional[bool] = Field(
        False,
        description='\n\n<p>Align axis tick with label, which is available only when <code class="codespan">boundaryGap</code> is set to be <code class="codespan">true</code> in category axis. See the following picture:</p>\n<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href="#xAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    length: Optional[float] = Field(
        5, description='\n\n<p>The length of the axis tick.</p>\n'
    )
    lineStyle: Optional[LineStyle4] = Field(
        None, description='<p>Line style of axis ticks.</p>\n'
    )


class LineStyle5(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Style configuration of minor ticks lines <a href="#xAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>minorTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class MinorTick(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Settings related minor ticks.</p>
    <p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>
    <p>Examples:</p>
    <p>1) Using minor ticks in function plotting.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>


    <p>2) Using minor ticks in log axis.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>


    """

    show: Optional[bool] = Field(False, description='\n\n<p>If show minor ticks.</p>\n')
    splitNumber: Optional[float] = Field(
        5, description='\n\n<p>Number of interval splited by minor ticks.</p>\n'
    )
    length: Optional[float] = Field(
        3, description='\n\n<p>Length of minor ticks lines。</p>\n'
    )
    lineStyle: Optional[LineStyle5] = Field(None, description='')


class _StyleName6(_StyleName5):
    pass


class Rich6(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName6] = Field(
        None, alias='<style_name>', description=''
    )


class AxisLabel(BaseModel):
    """
    <p>Settings related to axis label.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis label from appearing.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    rotate: Optional[float] = Field(
        0,
        description='\n\n<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n',
    )
    margin: Optional[float] = Field(
        8,
        description='\n\n<p>The margin between the axis label and the axis line.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    showMinLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the min tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n',
    )
    showMaxLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the max tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n',
    )
    hideOverlap: Optional[bool] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>Whether to hide overlapped labels.</p>\n',
    )
    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p>Color of axis label is set to be <a href="#xAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class="lang-ts">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class="lang-ts">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich6] = Field(
        None,
        description='<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',
    )


class LineStyle6(BaseModel):
    color: Optional[Union[Any, str]] = Field(
        "['#ccc']",
        description='\n\n<p>The color of the splitLine, which could be set separately.</p>\n<p>SplitLine color could also be set in color array, which the split lines would take as their colors in turns.</p>\n<p>Example:</p>\n<pre><code>splitLine: {\n    lineStyle: {\n        // Dark and light colors will be used in turns\n        color: [&#39;#aaa&#39;, &#39;#ddd&#39;]\n    }\n}\n</code></pre>',
    )
    width: Optional[float] = Field(1, description='\n\n<p>splitLine line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class SplitLine(BaseModel):
    """
    <p>Split line of axis in <a href="#grid">grid</a> area.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the splitLine from showing.\n<code class="codespan">value</code> type axes are shown by default, while <code class="codespan">category</code> type axes are hidden.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href="#xAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    lineStyle: Optional[LineStyle6] = Field(None, description='')


class LineStyle7(BaseModel):
    color: Optional[Any] = Field(
        '#eee',
        description='\n\n<p>minorSplitLineLine 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',
    )
    width: Optional[float] = Field(
        1, description='\n\n<p>minorSplitLine line width.</p>\n'
    )
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class MinorSplitLine(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#xAxis.minorTick">minorTick</a></p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>If show minor split lines.</p>\n'
    )
    lineStyle: Optional[LineStyle7] = Field(None, description='')


class AreaStyle(BaseModel):
    """
    <p>Split area style.</p>

    """

    color: Optional[Any] = Field(
        "['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']",
        description='<p>Color of split area.\nSplitArea color could also be set in color array, which the split lines would take as their colors in turns. Dark and light colors in turns are used by default.</p>\n',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class SplitArea(BaseModel):
    """
    <p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>

    """

    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href="#xAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    show: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to show the splitArea.</p>\n',
    )
    areaStyle: Optional[AreaStyle] = Field(
        None, description='<p>Split area style.</p>\n'
    )


class _StyleName7(_StyleName):
    pass


class Rich7(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName7] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle3(BaseModel):
    """
    <p>Text style of the category.</p>

    """

    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich7] = Field(
        None,
        description='<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',
    )


class Datum1(BaseModel):
    value: Optional[str] = Field(None, description='<p>Name of a category.</p>\n')
    textStyle: Optional[TextStyle3] = Field(
        None, description='<p>Text style of the category.</p>\n'
    )


class Label1(Label):
    """
    <p>label of axisPointer</p>

    """

    pass


class LineStyle8(LineStyle2):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    pass


class ShadowStyle1(ShadowStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    pass


class Handle(BaseModel):
    """
    <p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>

    """

    show: Optional[bool] = Field(
        False,
        description='\n\n<p>Set to <code class="codespan">true</code> to use handle.</p>\n',
    )
    icon: Optional[Any] = Field(
        None,
        description='\n\n<p>The icon of the handle.</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>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/axisPointer-handle-image&amp;edit=1&amp;reset=1" target="_blank">example of using image</a></p>\n',
    )
    size: Optional[Union[float, Any]] = Field(
        45,
        description='\n\n<p>The size of the handle, which can be set as a single value or an array (<code class="codespan">[width, height]</code>).</p>\n',
    )
    margin: Optional[float] = Field(
        50, description='\n\n<p>Distance from handle center to axis.</p>\n'
    )
    color: Optional[str] = Field(
        '#333', description='\n\n<p>The color of the handle.</p>\n'
    )
    throttle: Optional[float] = Field(
        40,
        description='\n\n<p>Throttle rate of trigger view update when dragging handle, in ms. Increase the value to improve performance, but decrease the experience.</p>\n',
    )
    shadowBlur: Optional[float] = Field(
        3,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        '#aaa',
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        2,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )


class AxisPointer1(BaseModel):
    """
    <p>axisPointer settings on the axis.</p>

    """

    show: Optional[bool] = Field(
        False,
        description='\n\n<p>axisPointer will not be displayed by default. But if <a href="#tooltip.trigger">tooltip.trigger</a> is set as <code class="codespan">&#39;axis&#39;</code> or <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> is set as  <code class="codespan">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n',
    )
    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label1] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle8] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle1] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    triggerTooltip: Optional[bool] = Field(
        True, description='\n\n<p>Whether to trigger tooltip.</p>\n'
    )
    value: Optional[float] = Field(
        None,
        description='<p>current value. When using <a href="xAxisPointer.handle" target="_blank">axisPointer.handle</a>, <code class="codespan">value</code> can be set to define the initial position of axisPointer.</p>\n',
    )
    status: Optional[bool] = Field(
        None,
        description='\n\n<p>Current status, can be <code class="codespan">&#39;show&#39;</code> 和 <code class="codespan">&#39;hide&#39;</code>.</p>\n',
    )
    handle: Optional[Handle] = Field(
        None,
        description='<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )


class XAxis(BaseModel):
    """
    <p>The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. <a href="#xAxis.offset">offset</a> can be used to avoid overlap when you need to put more than two x axis.</p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis from showing.</p>\n',
    )
    gridIndex: Optional[float] = Field(
        0,
        description='<p>The index of grid which the x axis belongs to. Defaults to be in the first grid.</p>\n',
    )
    alignTicks: Optional[bool] = Field(
        False,
        description='<blockquote>\n<p>Since <code class="codespan">v5.3.0</code></p>\n</blockquote>\n<p><code class="codespan">alignTicks</code> turned on to automatically align ticks when multiple numeric x axes. Only available for axes of type <code class="codespan">&#39;value&#39;</code> and <code class="codespan">&#39;log&#39;</code>.</p>\n',
    )
    position: Optional[str] = Field(
        None,
        description='\n\n<p>The position of x axis.</p>\n<p>options:</p>\n<ul>\n<li><code class="codespan">&#39;top&#39;</code></li>\n<li><code class="codespan">&#39;bottom&#39;</code></li>\n</ul>\n<p>The first x axis in grid defaults to be on the bottom of the grid, and the second x axis is on the other side against the first x axis.<br>Notice: Set <code class="codespan">xAxis.axisLine.onZero</code> to <code class="codespan">false</code> to activate this option.</p>\n',
    )
    offset: Optional[float] = Field(
        0,
        description='\n\n<p>Offset of x axis relative to default position. Useful when multiple x axis has same <a href="#xAxis.position">position</a> value.<br>Notice: Set <code class="codespan">xAxis.axisLine.onZero</code> to <code class="codespan">false</code> to activate this option.</p>\n',
    )
    type: Optional[str] = Field(
        'category',
        description='<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class="codespan">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class="codespan">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href="#series.data">series.data</a> or <a href="#dataset.source">dataset.source</a>, or can be specified via <a href="#xAxis.data">xAxis.data</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class="codespan">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n',
    )
    name: Optional[str] = Field(None, description='\n\n<p>Name of axis.</p>\n')
    nameLocation: Optional[str] = Field(
        'end',
        description='\n\n<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class="codespan">&#39;start&#39;</code></li>\n<li><code class="codespan">&#39;middle&#39;</code> or <code class="codespan">&#39;center&#39;</code></li>\n<li><code class="codespan">&#39;end&#39;</code></li>\n</ul>\n',
    )
    nameTextStyle: Optional[NameTextStyle] = Field(
        None, description='<p>Text style of axis name.</p>\n'
    )
    nameGap: Optional[float] = Field(
        15, description='\n\n<p>Gap between axis name and axis line.</p>\n'
    )
    nameRotate: Optional[float] = Field(
        None, description='\n\n<p>Rotation of axis name.</p>\n'
    )
    inverse: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n',
    )
    boundaryGap: Optional[Union[bool, Any]] = Field(
        None,
        description='\n\n<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class="codespan">boundaryGap</code> of category axis can be set to either <code class="codespan">true</code> or <code class="codespan">false</code>. Default value is set to be <code class="codespan">true</code>, in which case <a href="#xAxis.axisTick">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href="#xAxis.axisTick">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class="codespan">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href="#xAxis.min">min</a> and <a href="#xAxis.max">max</a>.\n<strong>Example: </strong></p>\n<pre><code class="lang-ts">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n',
    )
    min: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class="lang-ts">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the min value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated min value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    max: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class="lang-ts">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the max value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated max value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    scale: Optional[bool] = Field(
        False,
        description='\n\n<p>It is available only in numerical axis, i.e., <a href="#xAxis.type">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class="codespan">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href="#xAxis.min">min</a> and <a href="#xAxis.max">max</a> are set.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        5,
        description='\n\n<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n',
    )
    minInterval: Optional[float] = Field(
        0,
        description='\n\n<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class="codespan">1</code> to make sure axis label is show as integer.</p>\n<pre><code class="lang-ts">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href="#xAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    maxInterval: Optional[float] = Field(
        None,
        description='\n\n<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href="#xAxis.type">type</a> is &#39;time&#39;), it can be set to be <code class="codespan">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class="lang-ts">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href="#xAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    interval: Optional[float] = Field(
        None,
        description='\n\n<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href="#xAxis.splitNumber">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href="#xAxis.min">min</a> and <a href="#xAxis.max">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href="#xAxis.type">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href="#xAxis.type">type</a>: &#39;log&#39; axis.</p>\n',
    )
    logBase: Optional[float] = Field(
        10,
        description='\n\n<p>Base of logarithm, which is valid only for numeric axes with <a href="#xAxis.type">type</a>: &#39;log&#39;.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code>, to prevent interaction with the axis.</p>\n',
    )
    triggerEvent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class="lang-ts">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n',
    )
    axisLine: Optional[AxisLine] = Field(
        None, description='<p>Settings related to axis line.</p>\n'
    )
    axisTick: Optional[AxisTick] = Field(
        None, description='<p>Settings related to axis tick.</p>\n'
    )
    minorTick: Optional[MinorTick] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>\n\n',
    )
    axisLabel: Optional[AxisLabel] = Field(
        None, description='<p>Settings related to axis label.</p>\n'
    )
    splitLine: Optional[SplitLine] = Field(
        None,
        description='<p>Split line of axis in <a href="#grid">grid</a> area.</p>\n',
    )
    minorSplitLine: Optional[MinorSplitLine] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#xAxis.minorTick">minorTick</a></p>\n',
    )
    splitArea: Optional[SplitArea] = Field(
        None,
        description='<p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>\n',
    )
    data: Optional[List[Datum1]] = Field(
        None,
        description='<p>Category data, available in <a href="#xAxis.type">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href="#xAxis.type">type</a> is not specified, but <code class="codespan">axis.data</code> is specified, the <a href="#xAxis.type">type</a> is auto set as <code class="codespan">&#39;category&#39;</code>.</p>\n<p>If <a href="#xAxis.type">type</a> is specified as <code class="codespan">&#39;category&#39;</code>, but <code class="codespan">axis.data</code> is not specified, <code class="codespan">axis.data</code> will be auto collected from <a href="#series.data">series.data</a>. It brings convenience, but we should notice that <code class="codespan">axis.data</code> provides then value range of the <code class="codespan">&#39;category&#39;</code> axis. If  it is auto collected from <a href="#series.data">series.data</a>, Only the values appearing in <a href="#series.data">series.data</a> can be collected. For example, if <a href="#series.data">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n',
    )
    axisPointer: Optional[AxisPointer1] = Field(
        None, description='<p>axisPointer settings on the axis.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in x axis.</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: Optional[float] = Field(
        0,
        description='<p><code class="codespan">z</code> value of all graphical elements in x axis, 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',
    )


class _StyleName8(_StyleName5):
    pass


class Rich8(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName8] = Field(
        None, alias='<style_name>', description=''
    )


class NameTextStyle1(BaseModel):
    """
    <p>Text style of axis name.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Color of axis name uses <a href="#yAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>axis name font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich8] = Field(
        None,
        description='<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',
    )


class LineStyle9(LineStyle3):
    pass


class AxisLine1(BaseModel):
    """
    <p>Settings related to axis line.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis line from showing.</p>\n',
    )
    onZero: Optional[bool] = Field(
        True,
        description='\n\n<p>Specifies whether X or Y axis lies on the other&#39;s origin position, where value is 0 on axis. Valid only if the other axis is of value type, and contains 0 value.</p>\n',
    )
    onZeroAxisIndex: Optional[float] = Field(
        None,
        description='<p>When mutiple axes exists, this option can be used to specify which axis can be &quot;onZero&quot; to.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'none',
        description='\n\n<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class="codespan">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class="codespan">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class="codespan">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n',
    )
    symbolSize: Optional[Any] = Field(
        '[10, 15]',
        description='\n\n<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n',
    )
    symbolOffset: Optional[Union[Any, float]] = Field(
        '[0, 0]',
        description='\n\n<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n',
    )
    lineStyle: Optional[LineStyle9] = Field(None, description='')


class LineStyle10(BaseModel):
    """
    <p>Line style of axis ticks.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='<p>Color of axis label is set to be <a href="#yAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>axisTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class AxisTick1(BaseModel):
    """
    <p>Settings related to axis tick.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis tick from showing.</p>\n',
    )
    alignWithLabel: Optional[bool] = Field(
        False,
        description='\n\n<p>Align axis tick with label, which is available only when <code class="codespan">boundaryGap</code> is set to be <code class="codespan">true</code> in category axis. See the following picture:</p>\n<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href="#yAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    length: Optional[float] = Field(
        5, description='\n\n<p>The length of the axis tick.</p>\n'
    )
    lineStyle: Optional[LineStyle10] = Field(
        None, description='<p>Line style of axis ticks.</p>\n'
    )


class LineStyle11(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Style configuration of minor ticks lines <a href="#yAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>minorTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class MinorTick1(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Settings related minor ticks.</p>
    <p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>
    <p>Examples:</p>
    <p>1) Using minor ticks in function plotting.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>


    <p>2) Using minor ticks in log axis.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>


    """

    show: Optional[bool] = Field(False, description='\n\n<p>If show minor ticks.</p>\n')
    splitNumber: Optional[float] = Field(
        5, description='\n\n<p>Number of interval splited by minor ticks.</p>\n'
    )
    length: Optional[float] = Field(
        3, description='\n\n<p>Length of minor ticks lines。</p>\n'
    )
    lineStyle: Optional[LineStyle11] = Field(None, description='')


class _StyleName9(_StyleName5):
    pass


class Rich9(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName9] = Field(
        None, alias='<style_name>', description=''
    )


class AxisLabel1(BaseModel):
    """
    <p>Settings related to axis label.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis label from appearing.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    rotate: Optional[float] = Field(
        0,
        description='\n\n<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n',
    )
    margin: Optional[float] = Field(
        8,
        description='\n\n<p>The margin between the axis label and the axis line.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    showMinLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the min tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n',
    )
    showMaxLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the max tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n',
    )
    hideOverlap: Optional[bool] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>Whether to hide overlapped labels.</p>\n',
    )
    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p>Color of axis label is set to be <a href="#yAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class="lang-ts">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class="lang-ts">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich9] = Field(
        None,
        description='<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',
    )


class LineStyle12(LineStyle6):
    pass


class SplitLine1(BaseModel):
    """
    <p>Split line of axis in <a href="#grid">grid</a> area.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the splitLine from showing.\n<code class="codespan">value</code> type axes are shown by default, while <code class="codespan">category</code> type axes are hidden.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href="#yAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    lineStyle: Optional[LineStyle12] = Field(None, description='')


class LineStyle13(LineStyle7):
    pass


class MinorSplitLine1(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#yAxis.minorTick">minorTick</a></p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>If show minor split lines.</p>\n'
    )
    lineStyle: Optional[LineStyle13] = Field(None, description='')


class AreaStyle1(AreaStyle):
    """
    <p>Split area style.</p>

    """

    pass


class SplitArea1(BaseModel):
    """
    <p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>

    """

    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href="#yAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    show: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to show the splitArea.</p>\n',
    )
    areaStyle: Optional[AreaStyle1] = Field(
        None, description='<p>Split area style.</p>\n'
    )


class _StyleName10(_StyleName):
    pass


class Rich10(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName10] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle4(BaseModel):
    """
    <p>Text style of the category.</p>

    """

    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich10] = Field(
        None,
        description='<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',
    )


class Datum2(BaseModel):
    value: Optional[str] = Field(None, description='<p>Name of a category.</p>\n')
    textStyle: Optional[TextStyle4] = Field(
        None, description='<p>Text style of the category.</p>\n'
    )


class Label2(Label):
    """
    <p>label of axisPointer</p>

    """

    pass


class LineStyle14(LineStyle2):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    pass


class ShadowStyle2(ShadowStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    pass


class Handle1(Handle):
    """
    <p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>

    """

    pass


class AxisPointer2(BaseModel):
    """
    <p>axisPointer settings on the axis.</p>

    """

    show: Optional[bool] = Field(
        False,
        description='\n\n<p>axisPointer will not be displayed by default. But if <a href="#tooltip.trigger">tooltip.trigger</a> is set as <code class="codespan">&#39;axis&#39;</code> or <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> is set as  <code class="codespan">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n',
    )
    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label2] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle14] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle2] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    triggerTooltip: Optional[bool] = Field(
        True, description='\n\n<p>Whether to trigger tooltip.</p>\n'
    )
    value: Optional[float] = Field(
        None,
        description='<p>current value. When using <a href="xAxisPointer.handle" target="_blank">axisPointer.handle</a>, <code class="codespan">value</code> can be set to define the initial position of axisPointer.</p>\n',
    )
    status: Optional[bool] = Field(
        None,
        description='\n\n<p>Current status, can be <code class="codespan">&#39;show&#39;</code> 和 <code class="codespan">&#39;hide&#39;</code>.</p>\n',
    )
    handle: Optional[Handle1] = Field(
        None,
        description='<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )


class YAxis(BaseModel):
    """
    <p>The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. <a href="#yAxis.offset">offset</a> can be used to avoid overlap when you need to put more than two y axis.</p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis from showing.</p>\n',
    )
    gridIndex: Optional[float] = Field(
        0,
        description='<p>The index of grid which the y axis belongs to. Defaults to be in the first grid.</p>\n',
    )
    alignTicks: Optional[bool] = Field(
        False,
        description='<blockquote>\n<p>Since <code class="codespan">v5.3.0</code></p>\n</blockquote>\n<p><code class="codespan">alignTicks</code> turned on to automatically align ticks when multiple numeric y axes. Only available for axes of type <code class="codespan">&#39;value&#39;</code> and <code class="codespan">&#39;log&#39;</code>.</p>\n',
    )
    position: Optional[str] = Field(
        None,
        description='\n\n<p>the position of y axis.</p>\n<p>options:</p>\n<ul>\n<li><code class="codespan">&#39;left&#39;</code></li>\n<li><code class="codespan">&#39;right&#39;</code></li>\n</ul>\n<p>The first y axis in grid defaults to be the left (<code class="codespan">&#39;left&#39;</code>)  of the grid, and the second y axis is on the other side against the first y axis.<br>Notice: Set <code class="codespan">yAxis.axisLine.onZero</code> to <code class="codespan">false</code> to activate this option.</p>\n',
    )
    offset: Optional[float] = Field(
        0,
        description='\n\n<p>Offset of y axis relative to default position. Useful when multiple y axis has same <a href="#yAxis.position">position</a> value.\nNotice: Set <code class="codespan">yAxis.axisLine.onZero</code> to <code class="codespan">false</code> to activate this option.</p>\n',
    )
    type: Optional[str] = Field(
        'value',
        description='<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class="codespan">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class="codespan">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href="#series.data">series.data</a> or <a href="#dataset.source">dataset.source</a>, or can be specified via <a href="#yAxis.data">yAxis.data</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class="codespan">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n',
    )
    name: Optional[str] = Field(None, description='\n\n<p>Name of axis.</p>\n')
    nameLocation: Optional[str] = Field(
        'end',
        description='\n\n<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class="codespan">&#39;start&#39;</code></li>\n<li><code class="codespan">&#39;middle&#39;</code> or <code class="codespan">&#39;center&#39;</code></li>\n<li><code class="codespan">&#39;end&#39;</code></li>\n</ul>\n',
    )
    nameTextStyle: Optional[NameTextStyle1] = Field(
        None, description='<p>Text style of axis name.</p>\n'
    )
    nameGap: Optional[float] = Field(
        15, description='\n\n<p>Gap between axis name and axis line.</p>\n'
    )
    nameRotate: Optional[float] = Field(
        None, description='\n\n<p>Rotation of axis name.</p>\n'
    )
    inverse: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n',
    )
    boundaryGap: Optional[Union[bool, Any]] = Field(
        None,
        description='\n\n<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class="codespan">boundaryGap</code> of category axis can be set to either <code class="codespan">true</code> or <code class="codespan">false</code>. Default value is set to be <code class="codespan">true</code>, in which case <a href="#yAxis.axisTick">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href="#yAxis.axisTick">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class="codespan">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href="#yAxis.min">min</a> and <a href="#yAxis.max">max</a>.\n<strong>Example: </strong></p>\n<pre><code class="lang-ts">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n',
    )
    min: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class="lang-ts">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the min value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated min value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    max: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class="lang-ts">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the max value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated max value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    scale: Optional[bool] = Field(
        False,
        description='\n\n<p>It is available only in numerical axis, i.e., <a href="#yAxis.type">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class="codespan">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href="#yAxis.min">min</a> and <a href="#yAxis.max">max</a> are set.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        5,
        description='\n\n<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n',
    )
    minInterval: Optional[float] = Field(
        0,
        description='\n\n<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class="codespan">1</code> to make sure axis label is show as integer.</p>\n<pre><code class="lang-ts">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href="#yAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    maxInterval: Optional[float] = Field(
        None,
        description='\n\n<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href="#yAxis.type">type</a> is &#39;time&#39;), it can be set to be <code class="codespan">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class="lang-ts">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href="#yAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    interval: Optional[float] = Field(
        None,
        description='\n\n<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href="#yAxis.splitNumber">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href="#yAxis.min">min</a> and <a href="#yAxis.max">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href="#yAxis.type">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href="#yAxis.type">type</a>: &#39;log&#39; axis.</p>\n',
    )
    logBase: Optional[float] = Field(
        10,
        description='\n\n<p>Base of logarithm, which is valid only for numeric axes with <a href="#yAxis.type">type</a>: &#39;log&#39;.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code>, to prevent interaction with the axis.</p>\n',
    )
    triggerEvent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class="lang-ts">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n',
    )
    axisLine: Optional[AxisLine1] = Field(
        None, description='<p>Settings related to axis line.</p>\n'
    )
    axisTick: Optional[AxisTick1] = Field(
        None, description='<p>Settings related to axis tick.</p>\n'
    )
    minorTick: Optional[MinorTick1] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>\n\n',
    )
    axisLabel: Optional[AxisLabel1] = Field(
        None, description='<p>Settings related to axis label.</p>\n'
    )
    splitLine: Optional[SplitLine1] = Field(
        None,
        description='<p>Split line of axis in <a href="#grid">grid</a> area.</p>\n',
    )
    minorSplitLine: Optional[MinorSplitLine1] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#yAxis.minorTick">minorTick</a></p>\n',
    )
    splitArea: Optional[SplitArea1] = Field(
        None,
        description='<p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>\n',
    )
    data: Optional[List[Datum2]] = Field(
        None,
        description='<p>Category data, available in <a href="#yAxis.type">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href="#yAxis.type">type</a> is not specified, but <code class="codespan">axis.data</code> is specified, the <a href="#yAxis.type">type</a> is auto set as <code class="codespan">&#39;category&#39;</code>.</p>\n<p>If <a href="#yAxis.type">type</a> is specified as <code class="codespan">&#39;category&#39;</code>, but <code class="codespan">axis.data</code> is not specified, <code class="codespan">axis.data</code> will be auto collected from <a href="#series.data">series.data</a>. It brings convenience, but we should notice that <code class="codespan">axis.data</code> provides then value range of the <code class="codespan">&#39;category&#39;</code> axis. If  it is auto collected from <a href="#series.data">series.data</a>, Only the values appearing in <a href="#series.data">series.data</a> can be collected. For example, if <a href="#series.data">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n',
    )
    axisPointer: Optional[AxisPointer2] = Field(
        None, description='<p>axisPointer settings on the axis.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in y axis.</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: Optional[float] = Field(
        0,
        description='<p><code class="codespan">z</code> value of all graphical elements in y axis, 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',
    )


class Label3(Label):
    """
    <p>label of axisPointer</p>

    """

    pass


class LineStyle15(LineStyle2):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    pass


class ShadowStyle3(ShadowStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    pass


class CrossStyle1(CrossStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;cross&#39;</code>.</p>

    """

    pass


class AxisPointer3(BaseModel):
    """
        <p>Configuration item for axisPointer.</p>
    <p><code class="codespan">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href="#xAxis.axisPointer">xAxis.axisPointer</a> or <a href="#angleAxis.axisPointer">angleAxis.axisPointer</a>). More detailed features can be configured on <code class="codespan">someAxis.axisPointer</code>. But in common cases, using <code class="codespan">tooltip.axisPointer</code> is more convenient.</p>
    <blockquote>
    <p><strong>Notice:</strong> configurations of <code class="codespan">tooltip.axisPointer</code> has lower priority than that of <code class="codespan">someAxis.axisPointer</code>.</p>
    </blockquote>
    <hr>
    <p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>
    <p>For example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>


    <p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>
    <p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>


    <p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>

    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>



    <hr>
    <blockquote>
    <p><strong>Notice:</strong>
    Generally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>
    </blockquote>
    <blockquote>
    <p>But these configurations can only be configured in global axisPointer:
    <a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>
    </blockquote>
    <hr>
    <hr>
    <p><strong>How to display axisPointer:</strong></p>
    <p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>
    <p>Those axisPointer will not be displayed by default, utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to display the label of axisPointer:</strong></p>
    <p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to configure axisPointer on touch device:</strong></p>
    <p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>
    <p><strong>Notice:</strong>
    If tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>
    <p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>
    <hr>
    <p><strong>Snap to point</strong></p>
    <p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>
    <hr>

    """

    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class="codespan">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n',
    )
    axis: Optional[str] = Field(
        'auto',
        description='<p>The coordinate axis, which could be <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, or <code class="codespan">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label3] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle15] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle3] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    crossStyle: Optional[CrossStyle1] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;cross&#39;</code>.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        200,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'exponentialOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class TextStyle5(TextStyle2):
    """
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip1(BaseModel):
    """
        <p>tooltip settings in the coordinate system component.</p>
    <p><strong>General Introduction:</strong></p>
    <p>tooltip can be configured on different places:</p>
    <ul>
    <li><p>Configured on global: <a href="#tooltip">tooltip</a></p>
    </li>
    <li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>
    </li>
    <li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>
    </li>
    <li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>
    </li>
    </ul>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show the tooltip component.</p>\n<p>including tooltip floating layer and <a href="#tooltip.axisPointer">axisPointer</a>.</p>\n',
    )
    trigger: Optional[str] = Field(
        'item',
        description='\n\n<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class="codespan">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href="#grid">grid</a> or <a href="#polar">polar</a>. Also, you may assign axis with <a href="#tooltip.axisPointer.axis">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n',
    )
    axisPointer: Optional[AxisPointer3] = Field(
        None,
        description='<p>Configuration item for axisPointer.</p>\n<p><code class="codespan">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href="#xAxis.axisPointer">xAxis.axisPointer</a> or <a href="#angleAxis.axisPointer">angleAxis.axisPointer</a>). More detailed features can be configured on <code class="codespan">someAxis.axisPointer</code>. But in common cases, using <code class="codespan">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class="codespan">tooltip.axisPointer</code> has lower priority than that of <code class="codespan">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>\n\n\n<p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n',
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code 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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<p>The background color of tooltip&#39;s floating layer.</p>\n',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\n\n\n\n\n\n\n\n\n\n<p>The border color of tooltip&#39;s floating layer.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n\n\n\n\n\n\n\n\n<p>The border width of tooltip&#39;s floating layer.</p>\n',
    )
    padding: Optional[float] = Field(
        5,
        description='\n\n\n\n\n\n\n\n\n\n\n\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',
    )
    textStyle: Optional[TextStyle5] = Field(
        None, description='<p>The text syle of tooltip&#39;s floating layer.</p>\n'
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\n\n\n\n\n\n\n\n\n\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',
    )


class Polar(BaseModel):
    """
        <p>Polar coordinate can be used in scatter and line chart. Every polar coordinate has an <a href="#angleAxis">angleAxis</a> and a <a href="#radiusAxis">radiusAxis</a>.</p>
    <p><strong>For example: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=scatter-polar-punchCard&edit=1&reset=1" width="600" height="400"></iframe>




    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<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',
    )
    center: Optional[Any] = Field(
        "['50%', '50%']",
        description='\n\n<p>Center position of Polar coordinate, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>',
    )
    radius: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>Radius of Polar coordinate. Value can be:</p>\n<ul>\n<li><code class="codespan">number</code>: Specify outside radius directly.</li>\n<li><code class="codespan">string</code>: For example, <code class="codespan">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</li>\n</ul>\n<ul>\n<li><code class="codespan">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</li>\n</ul>\n',
    )
    tooltip: Optional[Tooltip1] = Field(
        None,
        description='<p>tooltip settings in the coordinate system component.</p>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href="#tooltip">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>\n</li>\n</ul>\n',
    )


class _StyleName11(_StyleName5):
    pass


class Rich11(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName11] = Field(
        None, alias='<style_name>', description=''
    )


class NameTextStyle2(BaseModel):
    """
    <p>Text style of axis name.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Color of axis name uses <a href="#radiusAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>axis name font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich11] = Field(
        None,
        description='<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',
    )


class LineStyle16(LineStyle3):
    pass


class AxisLine2(BaseModel):
    """
    <p>Settings related to axis line.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis line from showing.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'none',
        description='\n\n<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class="codespan">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class="codespan">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class="codespan">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n',
    )
    symbolSize: Optional[Any] = Field(
        '[10, 15]',
        description='\n\n<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n',
    )
    symbolOffset: Optional[Union[Any, float]] = Field(
        '[0, 0]',
        description='\n\n<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n',
    )
    lineStyle: Optional[LineStyle16] = Field(None, description='')


class LineStyle17(BaseModel):
    """
    <p>Line style of axis ticks.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='<p>Color of axis label is set to be <a href="#radiusAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>axisTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class AxisTick2(BaseModel):
    """
    <p>Settings related to axis tick.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis tick from showing.</p>\n',
    )
    alignWithLabel: Optional[bool] = Field(
        False,
        description='\n\n<p>Align axis tick with label, which is available only when <code class="codespan">boundaryGap</code> is set to be <code class="codespan">true</code> in category axis. See the following picture:</p>\n<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href="#radiusAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    length: Optional[float] = Field(
        5, description='\n\n<p>The length of the axis tick.</p>\n'
    )
    lineStyle: Optional[LineStyle17] = Field(
        None, description='<p>Line style of axis ticks.</p>\n'
    )


class LineStyle18(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Style configuration of minor ticks lines <a href="#radiusAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>minorTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class MinorTick2(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Settings related minor ticks.</p>
    <p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>
    <p>Examples:</p>
    <p>1) Using minor ticks in function plotting.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>


    <p>2) Using minor ticks in log axis.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>


    """

    show: Optional[bool] = Field(False, description='\n\n<p>If show minor ticks.</p>\n')
    splitNumber: Optional[float] = Field(
        5, description='\n\n<p>Number of interval splited by minor ticks.</p>\n'
    )
    length: Optional[float] = Field(
        3, description='\n\n<p>Length of minor ticks lines。</p>\n'
    )
    lineStyle: Optional[LineStyle18] = Field(None, description='')


class _StyleName12(_StyleName5):
    pass


class Rich12(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName12] = Field(
        None, alias='<style_name>', description=''
    )


class AxisLabel2(BaseModel):
    """
    <p>Settings related to axis label.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis label from appearing.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    rotate: Optional[float] = Field(
        0,
        description='\n\n<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n',
    )
    margin: Optional[float] = Field(
        8,
        description='\n\n<p>The margin between the axis label and the axis line.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    showMinLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the min tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n',
    )
    showMaxLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the max tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n',
    )
    hideOverlap: Optional[bool] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>Whether to hide overlapped labels.</p>\n',
    )
    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p>Color of axis label is set to be <a href="#radiusAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class="lang-ts">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class="lang-ts">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich12] = Field(
        None,
        description='<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',
    )


class LineStyle19(LineStyle6):
    pass


class SplitLine2(BaseModel):
    """
    <p>Split line of axis in <a href="#grid">grid</a> area.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the splitLine from showing.\n<code class="codespan">value</code> type axes are shown by default, while <code class="codespan">category</code> type axes are hidden.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href="#radiusAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    lineStyle: Optional[LineStyle19] = Field(None, description='')


class LineStyle20(LineStyle7):
    pass


class MinorSplitLine2(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#radiusAxis.minorTick">minorTick</a></p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>If show minor split lines.</p>\n'
    )
    lineStyle: Optional[LineStyle20] = Field(None, description='')


class AreaStyle2(AreaStyle):
    """
    <p>Split area style.</p>

    """

    pass


class SplitArea2(BaseModel):
    """
    <p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>

    """

    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href="#radiusAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    show: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to show the splitArea.</p>\n',
    )
    areaStyle: Optional[AreaStyle2] = Field(
        None, description='<p>Split area style.</p>\n'
    )


class _StyleName13(_StyleName):
    pass


class Rich13(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName13] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle6(BaseModel):
    """
    <p>Text style of the category.</p>

    """

    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich13] = Field(
        None,
        description='<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',
    )


class Datum3(BaseModel):
    value: Optional[str] = Field(None, description='<p>Name of a category.</p>\n')
    textStyle: Optional[TextStyle6] = Field(
        None, description='<p>Text style of the category.</p>\n'
    )


class Label4(Label):
    """
    <p>label of axisPointer</p>

    """

    pass


class LineStyle21(LineStyle2):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    pass


class ShadowStyle4(ShadowStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    pass


class Handle2(Handle):
    """
    <p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>

    """

    pass


class AxisPointer4(BaseModel):
    """
    <p>axisPointer settings on the axis.</p>

    """

    show: Optional[bool] = Field(
        False,
        description='\n\n<p>axisPointer will not be displayed by default. But if <a href="#tooltip.trigger">tooltip.trigger</a> is set as <code class="codespan">&#39;axis&#39;</code> or <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> is set as  <code class="codespan">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n',
    )
    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label4] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle21] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle4] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    triggerTooltip: Optional[bool] = Field(
        True, description='\n\n<p>Whether to trigger tooltip.</p>\n'
    )
    value: Optional[float] = Field(
        None,
        description='<p>current value. When using <a href="xAxisPointer.handle" target="_blank">axisPointer.handle</a>, <code class="codespan">value</code> can be set to define the initial position of axisPointer.</p>\n',
    )
    status: Optional[bool] = Field(
        None,
        description='\n\n<p>Current status, can be <code class="codespan">&#39;show&#39;</code> 和 <code class="codespan">&#39;hide&#39;</code>.</p>\n',
    )
    handle: Optional[Handle2] = Field(
        None,
        description='<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )


class RadiusAxis(BaseModel):
    """
    <p>Radial axis of polar coordinate.</p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    polarIndex: Optional[float] = Field(
        0,
        description='<p>Index of radial axis in polor coordinate. It&#39;s the first axis by default.</p>\n',
    )
    type: Optional[str] = Field(
        'value',
        description='<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class="codespan">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class="codespan">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href="#series.data">series.data</a> or <a href="#dataset.source">dataset.source</a>, or can be specified via <a href="#radiusAxis.data">radiusAxis.data</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class="codespan">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n',
    )
    name: Optional[str] = Field(None, description='\n\n<p>Name of axis.</p>\n')
    nameLocation: Optional[str] = Field(
        'end',
        description='\n\n<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class="codespan">&#39;start&#39;</code></li>\n<li><code class="codespan">&#39;middle&#39;</code> or <code class="codespan">&#39;center&#39;</code></li>\n<li><code class="codespan">&#39;end&#39;</code></li>\n</ul>\n',
    )
    nameTextStyle: Optional[NameTextStyle2] = Field(
        None, description='<p>Text style of axis name.</p>\n'
    )
    nameGap: Optional[float] = Field(
        15, description='\n\n<p>Gap between axis name and axis line.</p>\n'
    )
    nameRotate: Optional[float] = Field(
        None, description='\n\n<p>Rotation of axis name.</p>\n'
    )
    inverse: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n',
    )
    boundaryGap: Optional[Union[bool, Any]] = Field(
        None,
        description='\n\n<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class="codespan">boundaryGap</code> of category axis can be set to either <code class="codespan">true</code> or <code class="codespan">false</code>. Default value is set to be <code class="codespan">true</code>, in which case <a href="#radiusAxis.axisTick">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href="#radiusAxis.axisTick">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class="codespan">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href="#radiusAxis.min">min</a> and <a href="#radiusAxis.max">max</a>.\n<strong>Example: </strong></p>\n<pre><code class="lang-ts">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n',
    )
    min: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class="lang-ts">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the min value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated min value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    max: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class="lang-ts">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the max value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated max value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    scale: Optional[bool] = Field(
        False,
        description='\n\n<p>It is available only in numerical axis, i.e., <a href="#radiusAxis.type">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class="codespan">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href="#radiusAxis.min">min</a> and <a href="#radiusAxis.max">max</a> are set.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        5,
        description='\n\n<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n',
    )
    minInterval: Optional[float] = Field(
        0,
        description='\n\n<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class="codespan">1</code> to make sure axis label is show as integer.</p>\n<pre><code class="lang-ts">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href="#radiusAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    maxInterval: Optional[float] = Field(
        None,
        description='\n\n<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href="#radiusAxis.type">type</a> is &#39;time&#39;), it can be set to be <code class="codespan">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class="lang-ts">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href="#radiusAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    interval: Optional[float] = Field(
        None,
        description='\n\n<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href="#radiusAxis.splitNumber">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href="#radiusAxis.min">min</a> and <a href="#radiusAxis.max">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href="#radiusAxis.type">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href="#radiusAxis.type">type</a>: &#39;log&#39; axis.</p>\n',
    )
    logBase: Optional[float] = Field(
        10,
        description='\n\n<p>Base of logarithm, which is valid only for numeric axes with <a href="#radiusAxis.type">type</a>: &#39;log&#39;.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code>, to prevent interaction with the axis.</p>\n',
    )
    triggerEvent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class="lang-ts">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n',
    )
    axisLine: Optional[AxisLine2] = Field(
        None, description='<p>Settings related to axis line.</p>\n'
    )
    axisTick: Optional[AxisTick2] = Field(
        None, description='<p>Settings related to axis tick.</p>\n'
    )
    minorTick: Optional[MinorTick2] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>\n\n',
    )
    axisLabel: Optional[AxisLabel2] = Field(
        None, description='<p>Settings related to axis label.</p>\n'
    )
    splitLine: Optional[SplitLine2] = Field(
        None,
        description='<p>Split line of axis in <a href="#grid">grid</a> area.</p>\n',
    )
    minorSplitLine: Optional[MinorSplitLine2] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#radiusAxis.minorTick">minorTick</a></p>\n',
    )
    splitArea: Optional[SplitArea2] = Field(
        None,
        description='<p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>\n',
    )
    data: Optional[List[Datum3]] = Field(
        None,
        description='<p>Category data, available in <a href="#radiusAxis.type">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href="#radiusAxis.type">type</a> is not specified, but <code class="codespan">axis.data</code> is specified, the <a href="#radiusAxis.type">type</a> is auto set as <code class="codespan">&#39;category&#39;</code>.</p>\n<p>If <a href="#radiusAxis.type">type</a> is specified as <code class="codespan">&#39;category&#39;</code>, but <code class="codespan">axis.data</code> is not specified, <code class="codespan">axis.data</code> will be auto collected from <a href="#series.data">series.data</a>. It brings convenience, but we should notice that <code class="codespan">axis.data</code> provides then value range of the <code class="codespan">&#39;category&#39;</code> axis. If  it is auto collected from <a href="#series.data">series.data</a>, Only the values appearing in <a href="#series.data">series.data</a> can be collected. For example, if <a href="#series.data">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n',
    )
    axisPointer: Optional[AxisPointer4] = Field(
        None, description='<p>axisPointer settings on the axis.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in Radial axis.</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: Optional[float] = Field(
        0,
        description='<p><code class="codespan">z</code> value of all graphical elements in Radial axis, 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',
    )


class LineStyle22(LineStyle3):
    pass


class AxisLine3(BaseModel):
    """
    <p>Settings related to axis line.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis line from showing.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'none',
        description='\n\n<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class="codespan">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class="codespan">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class="codespan">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n',
    )
    symbolSize: Optional[Any] = Field(
        '[10, 15]',
        description='\n\n<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n',
    )
    symbolOffset: Optional[Union[Any, float]] = Field(
        '[0, 0]',
        description='\n\n<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n',
    )
    lineStyle: Optional[LineStyle22] = Field(None, description='')


class LineStyle23(BaseModel):
    """
    <p>Line style of axis ticks.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='<p>Color of axis label is set to be <a href="#angleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>axisTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class AxisTick3(BaseModel):
    """
    <p>Settings related to axis tick.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis tick from showing.</p>\n',
    )
    alignWithLabel: Optional[bool] = Field(
        False,
        description='\n\n<p>Align axis tick with label, which is available only when <code class="codespan">boundaryGap</code> is set to be <code class="codespan">true</code> in category axis. See the following picture:</p>\n<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href="#angleAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    length: Optional[float] = Field(
        5, description='\n\n<p>The length of the axis tick.</p>\n'
    )
    lineStyle: Optional[LineStyle23] = Field(
        None, description='<p>Line style of axis ticks.</p>\n'
    )


class LineStyle24(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Style configuration of minor ticks lines <a href="#angleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>minorTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class MinorTick3(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Settings related minor ticks.</p>
    <p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>
    <p>Examples:</p>
    <p>1) Using minor ticks in function plotting.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>


    <p>2) Using minor ticks in log axis.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>


    """

    show: Optional[bool] = Field(False, description='\n\n<p>If show minor ticks.</p>\n')
    splitNumber: Optional[float] = Field(
        5, description='\n\n<p>Number of interval splited by minor ticks.</p>\n'
    )
    length: Optional[float] = Field(
        3, description='\n\n<p>Length of minor ticks lines。</p>\n'
    )
    lineStyle: Optional[LineStyle24] = Field(None, description='')


class _StyleName14(_StyleName5):
    pass


class Rich14(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName14] = Field(
        None, alias='<style_name>', description=''
    )


class AxisLabel3(BaseModel):
    """
    <p>Settings related to axis label.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis label from appearing.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    margin: Optional[float] = Field(
        8,
        description='\n\n<p>The margin between the axis label and the axis line.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    showMinLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the min tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n',
    )
    showMaxLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the max tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n',
    )
    hideOverlap: Optional[bool] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>Whether to hide overlapped labels.</p>\n',
    )
    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p>Color of axis label is set to be <a href="#angleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class="lang-ts">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class="lang-ts">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich14] = Field(
        None,
        description='<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',
    )


class LineStyle25(LineStyle6):
    pass


class SplitLine3(BaseModel):
    """
    <p>Split line of axis in <a href="#grid">grid</a> area.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the splitLine from showing.\n<code class="codespan">value</code> type axes are shown by default, while <code class="codespan">category</code> type axes are hidden.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href="#angleAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    lineStyle: Optional[LineStyle25] = Field(None, description='')


class LineStyle26(LineStyle7):
    pass


class MinorSplitLine3(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#angleAxis.minorTick">minorTick</a></p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>If show minor split lines.</p>\n'
    )
    lineStyle: Optional[LineStyle26] = Field(None, description='')


class AreaStyle3(AreaStyle):
    """
    <p>Split area style.</p>

    """

    pass


class SplitArea3(BaseModel):
    """
    <p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>

    """

    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href="#angleAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    show: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to show the splitArea.</p>\n',
    )
    areaStyle: Optional[AreaStyle3] = Field(
        None, description='<p>Split area style.</p>\n'
    )


class _StyleName15(_StyleName):
    pass


class Rich15(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName15] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle7(BaseModel):
    """
    <p>Text style of the category.</p>

    """

    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich15] = Field(
        None,
        description='<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',
    )


class Datum4(BaseModel):
    value: Optional[str] = Field(None, description='<p>Name of a category.</p>\n')
    textStyle: Optional[TextStyle7] = Field(
        None, description='<p>Text style of the category.</p>\n'
    )


class Label5(Label):
    """
    <p>label of axisPointer</p>

    """

    pass


class LineStyle27(LineStyle2):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    pass


class ShadowStyle5(ShadowStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    pass


class Handle3(Handle):
    """
    <p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>

    """

    pass


class AxisPointer5(BaseModel):
    """
    <p>axisPointer settings on the axis.</p>

    """

    show: Optional[bool] = Field(
        False,
        description='\n\n<p>axisPointer will not be displayed by default. But if <a href="#tooltip.trigger">tooltip.trigger</a> is set as <code class="codespan">&#39;axis&#39;</code> or <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> is set as  <code class="codespan">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n',
    )
    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label5] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle27] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle5] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    triggerTooltip: Optional[bool] = Field(
        True, description='\n\n<p>Whether to trigger tooltip.</p>\n'
    )
    value: Optional[float] = Field(
        None,
        description='<p>current value. When using <a href="xAxisPointer.handle" target="_blank">axisPointer.handle</a>, <code class="codespan">value</code> can be set to define the initial position of axisPointer.</p>\n',
    )
    status: Optional[bool] = Field(
        None,
        description='\n\n<p>Current status, can be <code class="codespan">&#39;show&#39;</code> 和 <code class="codespan">&#39;hide&#39;</code>.</p>\n',
    )
    handle: Optional[Handle3] = Field(
        None,
        description='<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )


class AngleAxis(BaseModel):
    """
    <p>The angle axis in Polar Coordinate.</p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    polarIndex: Optional[float] = Field(
        0,
        description='<p>The index of angle axis in Polar Coordinate. The first axis is used by default.</p>\n',
    )
    startAngle: Optional[float] = Field(
        90,
        description='\n\n<p>Starting angle of axis. 90 degrees by default, standing for top position of center. 0 degree stands for right position of center.</p>\n<p>The following shows an example with startAngle of 45 deg.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/polar-start-angle&edit=1&reset=1" width="400" height="400"></iframe>\n\n',
    )
    clockwise: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether the positive position of axis is clockwise. True for clockwise by default.</p>\n<p>The following shows an example with clockwise as <code class="codespan">false</code>.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/polar-anticlockwise&edit=1&reset=1" width="400" height="400"></iframe>\n\n\n\n',
    )
    type: Optional[str] = Field(
        'category',
        description='<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class="codespan">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class="codespan">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href="#series.data">series.data</a> or <a href="#dataset.source">dataset.source</a>, or can be specified via <a href="#angleAxis.data">angleAxis.data</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class="codespan">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n',
    )
    boundaryGap: Optional[Union[bool, Any]] = Field(
        None,
        description='\n\n<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class="codespan">boundaryGap</code> of category axis can be set to either <code class="codespan">true</code> or <code class="codespan">false</code>. Default value is set to be <code class="codespan">true</code>, in which case <a href="#angleAxis.axisTick">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href="#angleAxis.axisTick">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class="codespan">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href="#angleAxis.min">min</a> and <a href="#angleAxis.max">max</a>.\n<strong>Example: </strong></p>\n<pre><code class="lang-ts">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n',
    )
    min: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class="lang-ts">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the min value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated min value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    max: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class="lang-ts">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the max value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated max value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    scale: Optional[bool] = Field(
        False,
        description='\n\n<p>It is available only in numerical axis, i.e., <a href="#angleAxis.type">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class="codespan">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href="#angleAxis.min">min</a> and <a href="#angleAxis.max">max</a> are set.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        5,
        description='\n\n<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n',
    )
    minInterval: Optional[float] = Field(
        0,
        description='\n\n<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class="codespan">1</code> to make sure axis label is show as integer.</p>\n<pre><code class="lang-ts">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href="#angleAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    maxInterval: Optional[float] = Field(
        None,
        description='\n\n<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href="#angleAxis.type">type</a> is &#39;time&#39;), it can be set to be <code class="codespan">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class="lang-ts">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href="#angleAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    interval: Optional[float] = Field(
        None,
        description='\n\n<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href="#angleAxis.splitNumber">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href="#angleAxis.min">min</a> and <a href="#angleAxis.max">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href="#angleAxis.type">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href="#angleAxis.type">type</a>: &#39;log&#39; axis.</p>\n',
    )
    logBase: Optional[float] = Field(
        10,
        description='\n\n<p>Base of logarithm, which is valid only for numeric axes with <a href="#angleAxis.type">type</a>: &#39;log&#39;.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code>, to prevent interaction with the axis.</p>\n',
    )
    triggerEvent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class="lang-ts">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n',
    )
    axisLine: Optional[AxisLine3] = Field(
        None, description='<p>Settings related to axis line.</p>\n'
    )
    axisTick: Optional[AxisTick3] = Field(
        None, description='<p>Settings related to axis tick.</p>\n'
    )
    minorTick: Optional[MinorTick3] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>\n\n',
    )
    axisLabel: Optional[AxisLabel3] = Field(
        None, description='<p>Settings related to axis label.</p>\n'
    )
    splitLine: Optional[SplitLine3] = Field(
        None,
        description='<p>Split line of axis in <a href="#grid">grid</a> area.</p>\n',
    )
    minorSplitLine: Optional[MinorSplitLine3] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#angleAxis.minorTick">minorTick</a></p>\n',
    )
    splitArea: Optional[SplitArea3] = Field(
        None,
        description='<p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>\n',
    )
    data: Optional[List[Datum4]] = Field(
        None,
        description='<p>Category data, available in <a href="#angleAxis.type">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href="#angleAxis.type">type</a> is not specified, but <code class="codespan">axis.data</code> is specified, the <a href="#angleAxis.type">type</a> is auto set as <code class="codespan">&#39;category&#39;</code>.</p>\n<p>If <a href="#angleAxis.type">type</a> is specified as <code class="codespan">&#39;category&#39;</code>, but <code class="codespan">axis.data</code> is not specified, <code class="codespan">axis.data</code> will be auto collected from <a href="#series.data">series.data</a>. It brings convenience, but we should notice that <code class="codespan">axis.data</code> provides then value range of the <code class="codespan">&#39;category&#39;</code> axis. If  it is auto collected from <a href="#series.data">series.data</a>, Only the values appearing in <a href="#series.data">series.data</a> can be collected. For example, if <a href="#series.data">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n',
    )
    axisPointer: Optional[AxisPointer5] = Field(
        None, description='<p>axisPointer settings on the axis.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in Angle Axis.</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: Optional[float] = Field(
        0,
        description='<p><code class="codespan">z</code> value of all graphical elements in Angle Axis, 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',
    )


class _StyleName16(_StyleName):
    pass


class Rich16(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName16] = Field(
        None, alias='<style_name>', description=''
    )


class AxisName(BaseModel):
    """
    <p>Name options for radar indicators.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether to display the indicator&#39;s name.</p>\n'
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The formatter of indicator&#39;s name, in which the string and callback function are supported. See the following example:</p>\n<pre><code class="lang-ts">// using string template, the template variable should be the indicator&#39;s name {value}\nformatter: &#39;【{value}】&#39;\n// using callback function, the first parameter is the indicator&#39;s name, and the second parameter id the indicator&#39;s cinfiguration item\nformatter: function (value, indicator) {\n    return &#39;【&#39; + value + &#39;】&#39;;\n}\n</code></pre>\n',
    )
    color: Optional[Any] = Field('#333', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich16] = Field(
        None,
        description='<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',
    )


class LineStyle28(LineStyle3):
    pass


class AxisLine4(BaseModel):
    """
    <p>Settings related to axis line.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis line from showing.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'none',
        description='\n\n<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class="codespan">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class="codespan">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class="codespan">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n',
    )
    symbolSize: Optional[Any] = Field(
        '[10, 15]',
        description='\n\n<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n',
    )
    symbolOffset: Optional[Union[Any, float]] = Field(
        '[0, 0]',
        description='\n\n<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n',
    )
    lineStyle: Optional[LineStyle28] = Field(None, description='')


class LineStyle29(BaseModel):
    """
    <p>Line style of axis ticks.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='<p>Color of axis label is set to be <a href="#.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>axisTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class AxisTick4(BaseModel):
    """
    <p>Settings related to axis tick.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis tick from showing.</p>\n',
    )
    length: Optional[float] = Field(
        5, description='\n\n<p>The length of the axis tick.</p>\n'
    )
    lineStyle: Optional[LineStyle29] = Field(
        None, description='<p>Line style of axis ticks.</p>\n'
    )


class _StyleName17(_StyleName5):
    pass


class Rich17(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName17] = Field(
        None, alias='<style_name>', description=''
    )


class AxisLabel4(BaseModel):
    """
    <p>Settings related to axis label.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis label from appearing.</p>\n',
    )
    rotate: Optional[float] = Field(
        0,
        description='\n\n<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n',
    )
    margin: Optional[float] = Field(
        8,
        description='\n\n<p>The margin between the axis label and the axis line.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    showMinLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the min tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n',
    )
    showMaxLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the max tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n',
    )
    hideOverlap: Optional[bool] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>Whether to hide overlapped labels.</p>\n',
    )
    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p>Color of axis label is set to be <a href="#.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class="lang-ts">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class="lang-ts">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich17] = Field(
        None,
        description='<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',
    )


class LineStyle30(LineStyle6):
    pass


class SplitLine4(BaseModel):
    """
    <p>Split line of axis in <a href="#grid">grid</a> area.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the splitLine from showing.\n<code class="codespan">value</code> type axes are shown by default, while <code class="codespan">category</code> type axes are hidden.</p>\n',
    )
    lineStyle: Optional[LineStyle30] = Field(None, description='')


class AreaStyle4(AreaStyle):
    """
    <p>Split area style.</p>

    """

    pass


class SplitArea4(BaseModel):
    """
    <p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">true</code> to show the splitArea.</p>\n',
    )
    areaStyle: Optional[AreaStyle4] = Field(
        None, description='<p>Split area style.</p>\n'
    )


class IndicatorItem(BaseModel):
    name: Optional[str] = Field(None, description='<p>Indicator&#39;s name.</p>\n')
    max: Optional[float] = Field(
        None,
        description='\n\n<p>The maximum value of indicator. It is an optional configuration, but we recommend to set it manually.</p>\n',
    )
    min: Optional[float] = Field(
        None,
        description='\n\n<p>The minimum value of indicator. It it an optional configuration, with default value of 0.</p>\n',
    )
    color: Optional[str] = Field(
        None, description='\n\n<p>Specfy a color of the indicator.</p>\n'
    )


class Radar(BaseModel):
    """
        <p>Coordinate for <a href="#series-radar">radar charts</a>. This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.</p>
    <p>Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including <a href="#radar.name">name</a>, <a href="#radar.axisLine">axisLine</a>, <a href="#radar.axisTick">axisTick</a>, <a href="#radar.axisLabel">axisLabel</a>, <a href="#radar.splitLine">splitLine</a>, <a href="#radar.splitArea">splitArea</a>.</p>
    <p>Here is a custom example of radar component.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/radar&edit=1&reset=1" width="400" height="400"></iframe>




    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<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',
    )
    center: Optional[Any] = Field(
        "['50%', '50%']",
        description='\n\n<p>Center position of , the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>',
    )
    radius: Optional[Union[float, str, Any]] = Field(
        '75%',
        description='\n\n<p>Radius of . Value can be:</p>\n<ul>\n<li><code class="codespan">number</code>: Specify outside radius directly.</li>\n<li><code class="codespan">string</code>: For example, <code class="codespan">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</li>\n</ul>\n<ul>\n<li><code class="codespan">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</li>\n</ul>\n',
    )
    startAngle: Optional[float] = Field(
        90,
        description='<p>The start angle of coordinate, which is the angle of the first indicator axis.</p>\n',
    )
    axisName: Optional[AxisName] = Field(
        None, description='<p>Name options for radar indicators.</p>\n'
    )
    nameGap: Optional[float] = Field(
        15,
        description='\n\n<p>Distance between the indicator&#39;s name and axis.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        5, description='\n\n<p>Segments of indicator axis.</p>\n'
    )
    shape: Optional[str] = Field(
        'polygon',
        description='\n\n<p>Radar render type, in which <code class="codespan">&#39;polygon&#39;</code> and <code class="codespan">&#39;circle&#39;</code> are supported.</p>\n',
    )
    scale: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to prevent calculating the scaling relative to zero. If it is set to be <code class="codespan">true</code>, the coordinate tick would not compulsorily contain zero value, which is usually useful in scatter diagram of double numerical values axis.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code>, to prevent interaction with the axis.</p>\n',
    )
    triggerEvent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class="lang-ts">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n',
    )
    axisLine: Optional[AxisLine4] = Field(
        None, description='<p>Settings related to axis line.</p>\n'
    )
    axisTick: Optional[AxisTick4] = Field(
        None, description='<p>Settings related to axis tick.</p>\n'
    )
    axisLabel: Optional[AxisLabel4] = Field(
        None, description='<p>Settings related to axis label.</p>\n'
    )
    splitLine: Optional[SplitLine4] = Field(
        None,
        description='<p>Split line of axis in <a href="#grid">grid</a> area.</p>\n',
    )
    splitArea: Optional[SplitArea4] = Field(
        None,
        description='<p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>\n',
    )
    indicator: Optional[List[IndicatorItem]] = Field(
        None,
        description='<p>Indicator of radar chart, which is used to assign multiple variables(dimensions) in radar chart. Here is the example.</p>\n<pre><code class="lang-ts">indicator: [\n   { name: &#39;Sales (sales) &#39;, max: 6500},\n   { name: &#39;Administration (Administration) &#39;, max: 16000, color: &#39;red&#39;}, // Set the indicator as &#39;red&#39;\n   { name: &#39;Information Technology (Information Technology) &#39;, max: 30000},\n   { name: &#39;Customer Support (Customer Support) &#39;, max: 38000},\n   { name: &#39;Development (Development) &#39;, max: 52000},\n   { name: &#39;Marketing (Marketing) &#39;, max: 25000}\n]\n</code></pre>\n',
    )


class DataZoomItem(BaseModel):
    """
        <p><strong>dataZoomInside</strong></p>
    <p>Data zoom component of <em>inside</em> type.</p>
    <p>Refer to <a href="#dataZoom">dataZoom</a> for more information.</p>
    <p>The <em>inside</em> means it&#39;s inside the coordinates.</p>
    <ul>
    <li>Translation: data area can be translated when moving in coordinates.</li>
    <li>Scaling:<ul>
    <li>PC: when mouse rolls (similar with touch pad) in coordinates.</li>
    <li>Mobile: when touches and moved with two fingers in coordinates on touch screens.</li>
    </ul>
    </li>
    </ul>
    <p><br>
    <br></p>

    """

    type: Optional[str] = Field('inside', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    disabled: Optional[bool] = Field(
        False, description='\n\n<p>Whether disable inside zoom.</p>\n'
    )
    xAxisIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify which <a href="#xAxis">xAxis</a> is/are controlled by the <code class="codespan">dataZoom-inside</code> when <a href="#grid">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class="codespan">xAxis</code> that parallel to <code class="codespan">dataZoom</code> are controlled when <a href="#dataZoom-inside.orient">dataZoom-inside.orient</a> is set as <code class="codespan">&#39;horizontal&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class="codespan">number</code>, one axis is controlled, while if it is set as an <code class="codespan">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">option: {\n    xAxis: [\n        {...}, // The first xAxis\n        {...}, // The second xAxis\n        {...}, // The third xAxis\n        {...}  // The fourth xAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            xAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third xAxis\n        },\n        { // The second dataZoom component\n            xAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth xAxis\n        }\n    ]\n}\n</code></pre>\n',
    )
    yAxisIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify which <a href="#yAxis">yAxis</a> is/are controlled by the <code class="codespan">dataZoom-inside</code> when <a href="#grid">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class="codespan">yAxis</code> that parallel to <code class="codespan">dataZoom</code> are controlled when <a href="#dataZoom-inside.orient">dataZoom-inside.orient</a> is set as <code class="codespan">&#39;vertical&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class="codespan">number</code>, one axis is controlled, while if it is set as an <code class="codespan">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">option: {\n    yAxis: [\n        {...}, // The first yAxis\n        {...}, // The second yAxis\n        {...}, // The third yAxis\n        {...}  // The fourth yAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            yAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third yAxis\n        },\n        { // The second dataZoom component\n            yAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth yAxis\n        }\n    ]\n}\n</code></pre>\n',
    )
    radiusAxisIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify which <a href="#radiusAxis">radiusAxis</a> is/are controlled by the <code class="codespan">dataZoom-inside</code> when <a href="#polar">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class="codespan">number</code>, one axis is controlled, while if it is set as an <code class="codespan">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">option: {\n    radiusAxis: [\n        {...}, // The first radiusAxis\n        {...}, // The second radiusAxis\n        {...}, // The third radiusAxis\n        {...}  // The fourth radiusAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third radiusAxis\n        },\n        { // The second dataZoom component\n            radiusAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth radiusAxis\n        }\n    ]\n}\n</code></pre>\n',
    )
    angleAxisIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify which <a href="#angleAxis">angleAxis</a> is/are controlled by the <code class="codespan">dataZoom-inside</code> when <a href="#polar">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class="codespan">number</code>, one axis is controlled, while if it is set as an <code class="codespan">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">option: {\n    angleAxis: [\n        {...}, // The first angleAxis\n        {...}, // The second angleAxis\n        {...}, // The third angleAxis\n        {...}  // The fourth angleAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third angleAxis\n        },\n        { // The second dataZoom component\n            angleAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth angleAxis\n        }\n    ]\n}\n</code></pre>\n',
    )
    filterMode: Optional[str] = Field(
        'filter',
        description='\n\n\n\n<p>Generally <code class="codespan">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href="#dataZoom.filterMode">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class="codespan">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class="codespan">xAxis</code> or only <code class="codespan">yAxis</code> is controlled by <code class="codespan">dataZoom</code>, <code class="codespan">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class="codespan">xAxis</code> and <code class="codespan">yAxis</code> are operated by <code class="codespan">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class="codespan">xAxis</code> and <code class="codespan">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class="codespan">&#39;value&#39;</code>), they should be set to be <code class="codespan">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class="codespan">xAxis</code> is the main axis and <code class="codespan">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class="codespan">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class="codespan">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class="codespan">xAxis</code> should be set to be <code class="codespan">fiterMode: &#39;filter&#39;</code>, while <code class="codespan">yAxis</code> should be set to be <code class="codespan">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class="lang-javascript">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second coloum corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>In the sample above, <code class="codespan">dataZoomX</code> is set as <code class="codespan">filterMode: &#39;filter&#39;</code>. When use drags <code class="codespan">dataZoomX</code> (do not touch <code class="codespan">dataZoomY</code>) and the valueWindow of <code class="codespan">xAxis</code> is changed to <code class="codespan">[2, 50]</code> consequently, <code class="codespan">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class="lang-javascript">[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class="codespan">24</code>, <code class="codespan">80</code>, <code class="codespan">9</code>, <code class="codespan">11</code>. After filtering, only <code class="codespan">24</code> and <code class="codespan">9</code> are left. Then the extent of <code class="codespan">yAxis</code> is adjusted to adapt the two values (if <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> are not set).</p>\n<p>So <code class="codespan">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class="codespan">dataZoomY</code> is set as <code class="codespan">filterMode: &#39;empty&#39;</code>. So if user drags <code class="codespan">dataZoomY</code> (do not touch <code class="codespan">dataZoomX</code>) and its window is changed to <code class="codespan">[10, 60]</code> consequently, <code class="codespan">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class="lang-javascript">[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class="codespan">12</code>, <code class="codespan">90</code>, <code class="codespan">3</code>, <code class="codespan">1</code>, which corresponds to <code class="codespan">xAxis</code>), will not be changed at all. So dragging <code class="codespan">yAxis</code> will not change extent of <code class="codespan">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n\n\n\n',
    )
    start: Optional[float] = Field(
        0,
        description='\n\n<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href="#dataZoom-inside.start">dataZoom-inside.start</a> and <a href="#dataZoom-inside.end">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class="codespan">dataZoom-inside.start</code> and axis extent can be checked in <a href="#dataZoom-inside.rangeMode">dataZoom-inside.rangeMode</a>.</p>\n',
    )
    end: Optional[float] = Field(
        100,
        description='\n\n<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href="#dataZoom-inside.start">dataZoom-inside.start</a> and <a href="#dataZoom-inside.end">dataZoom-inside.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class="codespan">dataZoom-inside.end</code> and axis extent can be checked in <a href="#dataZoom-inside.rangeMode">dataZoom-inside.rangeMode</a>.</p>\n',
    )
    startValue: Optional[Union[float, str, Any]] = Field(
        None,
        description='<p>The start absolute value of the window, not works when <a href="#dataZoom-inside.start">dataZoom-inside.start</a> is set.</p>\n<p><a href="#dataZoom-inside.startValue">dataZoom-inside.startValue</a> and <a href="#dataZoom-inside.endValue">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class="codespan">category</code>, <code class="codespan">startValue</code> could be set as <code class="codespan">index</code> of the array of <code class="codespan">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class="codespan">dataZoom-inside.startValue</code> and axis extent can be checked in <a href="#dataZoom-inside.rangeMode">dataZoom-inside.rangeMode</a>.</p>\n',
    )
    endValue: Optional[Union[float, str, Any]] = Field(
        None,
        description='<p>The end absolute value of the window, doesn&#39;t work when <a href="#dataZoom-inside.end">dataZoom-inside.end</a> is set.</p>\n<p><a href="#dataZoom-inside.startValue">dataZoom-inside.startValue</a> and <a href="#dataZoom-inside.endValue">dataZoom-inside.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class="codespan">category</code>, <code class="codespan">startValue</code> could be set as <code class="codespan">index</code> of the array of <code class="codespan">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class="codespan">dataZoom-inside.endValue</code> and axis extent can be checked in <a href="#dataZoom-inside.rangeMode">dataZoom-inside.rangeMode</a>.</p>\n',
    )
    minSpan: Optional[float] = Field(
        None,
        description='\n\n<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href="#dataZoom-inside.minValueSpan">dataZoom-inside.minValueSpan</a> is set, <code class="codespan">minSpan</code> does not work any more.</p>\n',
    )
    maxSpan: Optional[float] = Field(
        None,
        description='\n\n<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href="#dataZoom-inside.maxValueSpan">dataZoom-inside.maxValueSpan</a> is set, <code class="codespan">maxSpan</code> does not work any more.</p>\n',
    )
    minValueSpan: Optional[Union[float, str, Any]] = Field(
        None,
        description='<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class="codespan">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class="codespan">5</code> to represent 5 categories.</p>\n',
    )
    maxValueSpan: Optional[Union[float, str, Any]] = Field(
        None,
        description='<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class="codespan">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class="codespan">5</code> to represent 5 categories.</p>\n',
    )
    orient: Optional[str] = Field(
        None,
        description='\n\n<p>Specify whether the layout of <code class="codespan">dataZoom</code> component is horizontal or vertical. What&#39;s more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code class="codespan">&#39;horizontal&#39;</code>: horizontal.</p>\n</li>\n<li><p><code class="codespan">&#39;vertical&#39;</code>: vertical.</p>\n</li>\n</ul>\n',
    )
    zoomLock: Optional[bool] = Field(
        False,
        description='\n\n<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code class="codespan">true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n',
    )
    throttle: Optional[float] = Field(
        100,
        description='\n\n<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href="#animation">animation</a> set as <code class="codespan">true</code> and <a href="#animationDurationUpdate">animationDurationUpdate</a> set as bigger than <code class="codespan">0</code>, you can keep <code class="codespan">throttle</code> as the default value <code class="codespan">100</code> (or set it as a value bigger than <code class="codespan">0</code>), otherwise it might be not smooth when dragging.</p>\n<p>If <a href="#animation">animation</a> set as <code class="codespan">false</code> or <a href="#animationDurationUpdate">animationDurationUpdate</a> set as <code class="codespan">0</code>, and data size is not very large, and it seems to be not smooth when dragging, you can set <code class="codespan">throttle</code> as <code class="codespan">0</code> to improve that.</p>\n',
    )
    rangeMode: Optional[Any] = Field(
        None,
        description='<p>The format is <code class="codespan">[rangeModeForStart, rangeModeForEnd]</code>.</p>\n<p>For example <code class="codespan">rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code> means that use absolute value in <code class="codespan">start</code> and percent value in <code class="codespan">end</code>.</p>\n<p>Optional value for each item: <code class="codespan">&#39;value&#39;</code>, <code class="codespan">&#39;percent&#39;</code>.</p>\n<ul>\n<li><code class="codespan">&#39;value&#39;</code> mode: the axis extent will always only be determined by <code class="codespan">dataZoom.startValue</code> and <code class="codespan">dataZoom.endValue</code>, despite how data like and how <code class="codespan">axis.min</code> and <code class="codespan">axis.max</code> are.</li>\n<li><code class="codespan">&#39;percent&#39;</code> mode: <code class="codespan">100</code> represents 100% of the <code class="codespan">[dMin, dMax]</code>, where <code class="codespan">dMin</code> is <code class="codespan">axis.min</code> if <code class="codespan">axis.min</code> specified, otherwise <code class="codespan">data.extent[0]</code>, and <code class="codespan">dMax</code> is <code class="codespan">axis.max</code> if <code class="codespan">axis.max</code> specified, otherwise <code class="codespan">data.extent[1]</code>. Axis extent will only be determined by the result of the percent of <code class="codespan">[dMin, dMax]</code>.</li>\n</ul>\n<p><code class="codespan">rangeMode</code> are auto determined by whether <code class="codespan">option.start</code>/<code class="codespan">option.end</code> are specified (represents <code class="codespan">&#39;percent&#39;</code> mode) or <code class="codespan">option.startValue</code>/<code class="codespan">option.endValue</code> specified (represents <code class="codespan">&#39;value&#39;</code> mode). And when user behavior trigger the changing of the view, the <code class="codespan">rangeMode</code> would be modified automatically. For example, if triggered by <code class="codespan">toolbox.dataZoom</code>, it will be modefied to <code class="codespan">&#39;value&#39;</code>, and if triggered by <code class="codespan">dataZoom-inside</code> or <code class="codespan">dataZoom-slider</code>, it will be modified to <code class="codespan">&#39;percent&#39;</code>.</p>\n<p>If we specify <code class="codespan">rangeMode</code> manually in <code class="codespan">option</code>, it only works when both <code class="codespan">start</code> and <code class="codespan">startValue</code> specified or both <code class="codespan">end</code> and <code class="codespan">endValue</code> specified. So usually we do not need to specify <code class="codespan">dataZoom.rangeMode</code> manually.</p>\n<p>Take a scenario as an example. When we are using dynamic data (update data periodically via <code class="codespan">setOption</code>), if in <code class="codespan">&#39;value</code>&#39; mode, the window will be kept in a fixed value range despite how data are appended, while if in <code class="codespan">&#39;percent&#39;</code> mode, whe window range will be changed alone with the appended data (suppose <code class="codespan">axis.min</code> and <code class="codespan">axis.max</code> are not specified).</p>\n',
    )
    zoomOnMouseWheel: Optional[Union[bool, str]] = Field(
        True,
        description='\n\n<p>How to trigger zoom. Optional values:</p>\n<ul>\n<li><code class="codespan">true</code>：Mouse wheel triggers zoom.</li>\n<li><code class="codespan">false</code>：Mouse wheel can not triggers zoom.</li>\n<li><code class="codespan">&#39;shift&#39;</code>：Holding <code class="codespan">shift</code> and mouse wheel triggers zoom.</li>\n<li><code class="codespan">&#39;ctrl&#39;</code>：Holding <code class="codespan">ctrl</code> and mouse wheel triggers zoom.</li>\n<li><code class="codespan">&#39;alt&#39;</code>：Holding <code class="codespan">alt</code> and mouse wheel triggers zoom.</li>\n</ul>\n',
    )
    moveOnMouseMove: Optional[Union[bool, str]] = Field(
        True,
        description='\n\n<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code class="codespan">true</code>：Mouse move triggers data window move.</li>\n<li><code class="codespan">false</code>：Mouse move can not triggers data window move.</li>\n<li><code class="codespan">&#39;shift&#39;</code>：Holding <code class="codespan">shift</code> and mouse move triggers data window move.</li>\n<li><code class="codespan">&#39;ctrl&#39;</code>：Holding <code class="codespan">ctrl</code> and mouse move triggers data window move.</li>\n<li><code class="codespan">&#39;alt&#39;</code>：Holding <code class="codespan">alt</code> and mouse move triggers data window move.</li>\n</ul>\n',
    )
    moveOnMouseWheel: Optional[Union[bool, str]] = Field(
        False,
        description='\n\n<p>How to trigger data window move. Optional values:</p>\n<ul>\n<li><code class="codespan">true</code>：Mouse wheel triggers data window move.</li>\n<li><code class="codespan">false</code>：Mouse wheel can not triggers data window move.</li>\n<li><code class="codespan">&#39;shift&#39;</code>：Holding <code class="codespan">shift</code> and mouse wheel triggers data window move.</li>\n<li><code class="codespan">&#39;ctrl&#39;</code>：Holding <code class="codespan">ctrl</code> and mouse wheel triggers data window move.</li>\n<li><code class="codespan">&#39;alt&#39;</code>：Holding <code class="codespan">alt</code> and mouse wheel triggers data window move.</li>\n</ul>\n',
    )
    preventDefaultMouseMove: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to prevent default behavior of mouse move event.</p>\n',
    )


class LineStyle31(BaseModel):
    """
    <p>Line style of data shadow</p>

    """

    color: Optional[Any] = Field(
        '#d2dbee',
        description='\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',
    )
    width: Optional[float] = Field(0.5, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AreaStyle5(BaseModel):
    """
    <p>Area style of data shadow</p>

    """

    color: Optional[Any] = Field(
        'd2dbee',
        description='\n\n<p>Fill 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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.2,
        description='\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',
    )


class DataBackground(BaseModel):
    """
    <p>The style of data shadow.</p>

    """

    lineStyle: Optional[LineStyle31] = Field(
        None, description='<p>Line style of data shadow</p>\n'
    )
    areaStyle: Optional[AreaStyle5] = Field(
        None, description='<p>Area style of data shadow</p>\n'
    )


class LineStyle32(BaseModel):
    """
    <p>Line style of selected data shadow.</p>

    """

    color: Optional[Any] = Field(
        '#8fb0f7',
        description='\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',
    )
    width: Optional[float] = Field(0.5, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AreaStyle6(BaseModel):
    """
    <p>Area style of selected data shadow.</p>

    """

    color: Optional[Any] = Field(
        '#8fb0f7',
        description='\n\n<p>Fill 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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.2,
        description='\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',
    )


class SelectedDataBackground(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Styles of selected data shadow.</p>

    """

    lineStyle: Optional[LineStyle32] = Field(
        None, description='<p>Line style of selected data shadow.</p>\n'
    )
    areaStyle: Optional[AreaStyle6] = Field(
        None, description='<p>Area style of selected data shadow.</p>\n'
    )


class HandleStyle(BaseModel):
    """
    <p>Style of handle. Please refer to <a href="http://localhost/echarts-website/examples/en/editor.html?c=area-simple" target="_blank">area-simple example</a>.</p>

    """

    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#ACB8D1',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class MoveHandleStyle(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Style of move handle.</p>

    """

    color: Optional[Any] = Field(
        '#D2DBEE',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class TextStyle8(BaseModel):
    color: Optional[Any] = Field(
        '#333', description='\n\n<p>dataZoom  text color.</p>\n'
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>dataZoom  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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>dataZoom  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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>dataZoom  font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>dataZoom  font size.</p>\n'
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )


class BrushStyle(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Style of brushing area.</p>

    """

    color: Optional[Any] = Field(
        'rgba(135,175,274,0.15)',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class HandleStyle1(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class MoveHandleStyle1(HandleStyle1):
    pass


class Emphasis1(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Style when highlighted.</p>

    """

    handleStyle: Optional[HandleStyle1] = Field(None, description='')
    moveHandleStyle: Optional[MoveHandleStyle1] = Field(None, description='')


class DataZoomItem1(BaseModel):
    """
        <p>Slider type dataZoom component provides functions like data thumbnail, zoom, brush to select, drag to move, click to locate.</p>
    <p>The followling picture shows areas to interact.</p>
    <p><img width="600" height="auto" src="documents/asset/img/dataZoom-zone.png"></p>

    """

    type: Optional[str] = Field('slider', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show the  component. If is set to be <code class="codespan">false</code>, it will not show, but its data filtering function still works.</p>\n',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(47,69,84,0)',
        description='\n\n<p>The background color of the component.</p>\n',
    )
    dataBackground: Optional[DataBackground] = Field(
        None, description='<p>The style of data shadow.</p>\n'
    )
    selectedDataBackground: Optional[SelectedDataBackground] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Styles of selected data shadow.</p>\n',
    )
    fillerColor: Optional[Any] = Field(
        'rgba(47,69,84,0.25)',
        description='\n\n<p>The color to fill selected area.</p>\n',
    )
    borderColor: Optional[Any] = Field(
        '#ddd', description='\n\n<p>The color of border.</p>\n'
    )
    handleIcon: Optional[str] = Field(
        None,
        description='\n\n<p>Icon shape of handle, which supports path string. Its default value is:</p>\n<pre><code class="lang-ts">&#39;M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z&#39;\n</code></pre>\n<p>It can be set to an image with <code 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>',
    )
    handleSize: Optional[Union[float, str]] = Field(
        '100%',
        description='\n\n<p>The size of control handle. It can be in pixels, or in percentage relative to the width of dataZoom component. By default, it&#39;s the same as the width of dataZoom component.</p>\n',
    )
    handleStyle: Optional[HandleStyle] = Field(
        None,
        description='<p>Style of handle. Please refer to <a href="http://localhost/echarts-website/examples/en/editor.html?c=area-simple" target="_blank">area-simple example</a>.</p>\n',
    )
    moveHandleIcon: Optional[str] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Icon of move handle.</p>\n<pre><code class="lang-ts">&#39;M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z&#39;\n</code></pre>\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>',
    )
    moveHandleSize: Optional[float] = Field(
        7,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Size of move handle.</p>\n',
    )
    moveHandleStyle: Optional[MoveHandleStyle] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Style of move handle.</p>\n',
    )
    labelPrecision: Optional[Union[float, str]] = Field(
        'auto',
        description='\n\n<p>Precision of label if in number form. By default, it is decided based on the number of data.</p>\n',
    )
    labelFormatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The formatter tool for the label.</p>\n<ul>\n<li><p>It is a template if in <code class="codespan">string</code>. For instance, <code class="codespan">aaaa{value}bbbb</code>, where <code class="codespan">{value}</code> will be replaced by the value of actual data value.</p>\n</li>\n<li><p>It is a callback function if in <code class="codespan">Function</code>. For example:</p>\n</li>\n</ul>\n<pre><code class="lang-javascript">/**\n * @param {*} value If axis.type is &#39;category&#39;, `value` is the index of axis.data.\n *                  else `value` is current value.\n * @param {strign} valueStr Inner formatted string.\n * @return {string} Returns the label formatted.\n */\nlabelFormatter: function (value, valueStr) {\n    return &#39;aaa&#39; + value + &#39;bbb&#39;;\n}\n</code></pre>\n',
    )
    showDetail: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show detail, that is, show the detailed data information when dragging.</p>\n',
    )
    showDataShadow: Optional[str] = Field(
        'auto',
        description='\n\n<p>Whether to show data shadow in <code class="codespan">dataZoom-silder</code> component, to indicate the data tendency in brief.</p>\n',
    )
    realtime: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to update view while dragging. If it is set as <code class="codespan">false</code>, the view will be updated only at the end of dragging.</p>\n',
    )
    textStyle: Optional[TextStyle8] = Field(None, description='')
    xAxisIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify which <a href="#xAxis">xAxis</a> is/are controlled by the <code class="codespan">dataZoom-slider</code> when <a href="#grid">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class="codespan">xAxis</code> that parallel to <code class="codespan">dataZoom</code> are controlled when <a href="#dataZoom-slider.orient">dataZoom-slider.orient</a> is set as <code class="codespan">&#39;horizontal&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class="codespan">number</code>, one axis is controlled, while if it is set as an <code class="codespan">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">option: {\n    xAxis: [\n        {...}, // The first xAxis\n        {...}, // The second xAxis\n        {...}, // The third xAxis\n        {...}  // The fourth xAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            xAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third xAxis\n        },\n        { // The second dataZoom component\n            xAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth xAxis\n        }\n    ]\n}\n</code></pre>\n',
    )
    yAxisIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify which <a href="#yAxis">yAxis</a> is/are controlled by the <code class="codespan">dataZoom-slider</code> when <a href="#grid">catesian coordinate system</a> is used.</p>\n<p>By default the first <code class="codespan">yAxis</code> that parallel to <code class="codespan">dataZoom</code> are controlled when <a href="#dataZoom-slider.orient">dataZoom-slider.orient</a> is set as <code class="codespan">&#39;vertical&#39;</code>. But it is recommended to specify it explicitly but not use default value.</p>\n<p>If it is set as a single <code class="codespan">number</code>, one axis is controlled, while if it is set as an <code class="codespan">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">option: {\n    yAxis: [\n        {...}, // The first yAxis\n        {...}, // The second yAxis\n        {...}, // The third yAxis\n        {...}  // The fourth yAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            yAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third yAxis\n        },\n        { // The second dataZoom component\n            yAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth yAxis\n        }\n    ]\n}\n</code></pre>\n',
    )
    radiusAxisIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify which <a href="#radiusAxis">radiusAxis</a> is/are controlled by the <code class="codespan">dataZoom-slider</code> when <a href="#polar">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class="codespan">number</code>, one axis is controlled, while if it is set as an <code class="codespan">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">option: {\n    radiusAxis: [\n        {...}, // The first radiusAxis\n        {...}, // The second radiusAxis\n        {...}, // The third radiusAxis\n        {...}  // The fourth radiusAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            radiusAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third radiusAxis\n        },\n        { // The second dataZoom component\n            radiusAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth radiusAxis\n        }\n    ]\n}\n</code></pre>\n',
    )
    angleAxisIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify which <a href="#angleAxis">angleAxis</a> is/are controlled by the <code class="codespan">dataZoom-slider</code> when <a href="#polar">polar coordinate system</a> is used.</p>\n<p>If it is set as a single <code class="codespan">number</code>, one axis is controlled, while if it is set as an <code class="codespan">Array</code> , multiple axes are controlled.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">option: {\n    angleAxis: [\n        {...}, // The first angleAxis\n        {...}, // The second angleAxis\n        {...}, // The third angleAxis\n        {...}  // The fourth angleAxis\n    ],\n    dataZoom: [\n        { // The first dataZoom component\n            angleAxisIndex: [0, 2] // Indicates that this dataZoom component\n                                     // controls the first and the third angleAxis\n        },\n        { // The second dataZoom component\n            angleAxisIndex: 3      // indicates that this dataZoom component\n                                     // controls the fourth angleAxis\n        }\n    ]\n}\n</code></pre>\n',
    )
    filterMode: Optional[str] = Field(
        'filter',
        description='\n\n\n\n<p>Generally <code class="codespan">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href="#dataZoom.filterMode">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class="codespan">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class="codespan">xAxis</code> or only <code class="codespan">yAxis</code> is controlled by <code class="codespan">dataZoom</code>, <code class="codespan">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class="codespan">xAxis</code> and <code class="codespan">yAxis</code> are operated by <code class="codespan">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class="codespan">xAxis</code> and <code class="codespan">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class="codespan">&#39;value&#39;</code>), they should be set to be <code class="codespan">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class="codespan">xAxis</code> is the main axis and <code class="codespan">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class="codespan">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class="codespan">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class="codespan">xAxis</code> should be set to be <code class="codespan">fiterMode: &#39;filter&#39;</code>, while <code class="codespan">yAxis</code> should be set to be <code class="codespan">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class="lang-javascript">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second coloum corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>In the sample above, <code class="codespan">dataZoomX</code> is set as <code class="codespan">filterMode: &#39;filter&#39;</code>. When use drags <code class="codespan">dataZoomX</code> (do not touch <code class="codespan">dataZoomY</code>) and the valueWindow of <code class="codespan">xAxis</code> is changed to <code class="codespan">[2, 50]</code> consequently, <code class="codespan">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class="lang-javascript">[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class="codespan">24</code>, <code class="codespan">80</code>, <code class="codespan">9</code>, <code class="codespan">11</code>. After filtering, only <code class="codespan">24</code> and <code class="codespan">9</code> are left. Then the extent of <code class="codespan">yAxis</code> is adjusted to adapt the two values (if <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> are not set).</p>\n<p>So <code class="codespan">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class="codespan">dataZoomY</code> is set as <code class="codespan">filterMode: &#39;empty&#39;</code>. So if user drags <code class="codespan">dataZoomY</code> (do not touch <code class="codespan">dataZoomX</code>) and its window is changed to <code class="codespan">[10, 60]</code> consequently, <code class="codespan">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class="lang-javascript">[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class="codespan">12</code>, <code class="codespan">90</code>, <code class="codespan">3</code>, <code class="codespan">1</code>, which corresponds to <code class="codespan">xAxis</code>), will not be changed at all. So dragging <code class="codespan">yAxis</code> will not change extent of <code class="codespan">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n\n\n\n',
    )
    start: Optional[float] = Field(
        0,
        description='\n\n<p>The start percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href="#dataZoom-slider.start">dataZoom-slider.start</a> and <a href="#dataZoom-slider.end">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class="codespan">dataZoom-slider.start</code> and axis extent can be checked in <a href="#dataZoom-slider.rangeMode">dataZoom-slider.rangeMode</a>.</p>\n',
    )
    end: Optional[float] = Field(
        100,
        description='\n\n<p>The end percentage of the window out of the data extent, in the range of 0 ~ 100.</p>\n<p><a href="#dataZoom-slider.start">dataZoom-slider.start</a> and <a href="#dataZoom-slider.end">dataZoom-slider.end</a> define the window of the data in <strong>percent</strong> form.</p>\n<p>More info about the relationship between <code class="codespan">dataZoom-slider.end</code> and axis extent can be checked in <a href="#dataZoom-slider.rangeMode">dataZoom-slider.rangeMode</a>.</p>\n',
    )
    startValue: Optional[Union[float, str, Any]] = Field(
        None,
        description='<p>The start absolute value of the window, not works when <a href="#dataZoom-slider.start">dataZoom-slider.start</a> is set.</p>\n<p><a href="#dataZoom-slider.startValue">dataZoom-slider.startValue</a> and <a href="#dataZoom-slider.endValue">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class="codespan">category</code>, <code class="codespan">startValue</code> could be set as <code class="codespan">index</code> of the array of <code class="codespan">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class="codespan">dataZoom-slider.startValue</code> and axis extent can be checked in <a href="#dataZoom-slider.rangeMode">dataZoom-slider.rangeMode</a>.</p>\n',
    )
    endValue: Optional[Union[float, str, Any]] = Field(
        None,
        description='<p>The end absolute value of the window, doesn&#39;t work when <a href="#dataZoom-slider.end">dataZoom-slider.end</a> is set.</p>\n<p><a href="#dataZoom-slider.startValue">dataZoom-slider.startValue</a> and <a href="#dataZoom-slider.endValue">dataZoom-slider.endValue</a> define the window of the data window in <strong>absolute value</strong> form.</p>\n<p>Notice, if an axis is set to be <code class="codespan">category</code>, <code class="codespan">startValue</code> could be set as <code class="codespan">index</code> of the array of <code class="codespan">axis.data</code> or as the array value itself. In the latter case, it will internally and automatically translate to the index of array.</p>\n<p>More info about the relationship between <code class="codespan">dataZoom-slider.endValue</code> and axis extent can be checked in <a href="#dataZoom-slider.rangeMode">dataZoom-slider.rangeMode</a>.</p>\n',
    )
    minSpan: Optional[float] = Field(
        None,
        description='\n\n<p>Used to restrict minimal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href="#dataZoom-slider.minValueSpan">dataZoom-slider.minValueSpan</a> is set, <code class="codespan">minSpan</code> does not work any more.</p>\n',
    )
    maxSpan: Optional[float] = Field(
        None,
        description='\n\n<p>Used to restrict maximal window size, in percent, which value is in the range of [0, 100].</p>\n<p>If <a href="#dataZoom-slider.maxValueSpan">dataZoom-slider.maxValueSpan</a> is set, <code class="codespan">maxSpan</code> does not work any more.</p>\n',
    )
    minValueSpan: Optional[Union[float, str, Any]] = Field(
        None,
        description='<p>Used to restrict minimal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class="codespan">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class="codespan">5</code> to represent 5 categories.</p>\n',
    )
    maxValueSpan: Optional[Union[float, str, Any]] = Field(
        None,
        description='<p>Used to restrict maximal window size.</p>\n<p>For example:\nIn time axis it can be set as <code class="codespan">3600 * 24 * 1000 * 5</code> to represent &quot;5 day&quot;.\nIn category axis it can be set as <code class="codespan">5</code> to represent 5 categories.</p>\n',
    )
    orient: Optional[str] = Field(
        None,
        description='\n\n<p>Specify whether the layout of <code class="codespan">dataZoom</code> component is horizontal or vertical. What&#39;s more, it indicates whether the horizontal axis or vertical axis is controlled by default in catesian coordinate system.</p>\n<p>Valid values:</p>\n<ul>\n<li><p><code class="codespan">&#39;horizontal&#39;</code>: horizontal.</p>\n</li>\n<li><p><code class="codespan">&#39;vertical&#39;</code>: vertical.</p>\n</li>\n</ul>\n',
    )
    zoomLock: Optional[bool] = Field(
        False,
        description='\n\n<p>Specify whether to lock the size of window (selected area).</p>\n<p>When set as <code class="codespan">true</code>, the size of window is locked, that is, only the translation (by mouse drag or touch drag) is avialable but zoom is not.</p>\n',
    )
    throttle: Optional[float] = Field(
        100,
        description='\n\n<p>Specify the frame rate of views refreshing, with unit millisecond (ms).</p>\n<p>If <a href="#animation">animation</a> set as <code class="codespan">true</code> and <a href="#animationDurationUpdate">animationDurationUpdate</a> set as bigger than <code class="codespan">0</code>, you can keep <code class="codespan">throttle</code> as the default value <code class="codespan">100</code> (or set it as a value bigger than <code class="codespan">0</code>), otherwise it might be not smooth when dragging.</p>\n<p>If <a href="#animation">animation</a> set as <code class="codespan">false</code> or <a href="#animationDurationUpdate">animationDurationUpdate</a> set as <code class="codespan">0</code>, and data size is not very large, and it seems to be not smooth when dragging, you can set <code class="codespan">throttle</code> as <code class="codespan">0</code> to improve that.</p>\n',
    )
    rangeMode: Optional[Any] = Field(
        None,
        description='<p>The format is <code class="codespan">[rangeModeForStart, rangeModeForEnd]</code>.</p>\n<p>For example <code class="codespan">rangeMode: [&#39;value&#39;, &#39;percent&#39;]</code> means that use absolute value in <code class="codespan">start</code> and percent value in <code class="codespan">end</code>.</p>\n<p>Optional value for each item: <code class="codespan">&#39;value&#39;</code>, <code class="codespan">&#39;percent&#39;</code>.</p>\n<ul>\n<li><code class="codespan">&#39;value&#39;</code> mode: the axis extent will always only be determined by <code class="codespan">dataZoom.startValue</code> and <code class="codespan">dataZoom.endValue</code>, despite how data like and how <code class="codespan">axis.min</code> and <code class="codespan">axis.max</code> are.</li>\n<li><code class="codespan">&#39;percent&#39;</code> mode: <code class="codespan">100</code> represents 100% of the <code class="codespan">[dMin, dMax]</code>, where <code class="codespan">dMin</code> is <code class="codespan">axis.min</code> if <code class="codespan">axis.min</code> specified, otherwise <code class="codespan">data.extent[0]</code>, and <code class="codespan">dMax</code> is <code class="codespan">axis.max</code> if <code class="codespan">axis.max</code> specified, otherwise <code class="codespan">data.extent[1]</code>. Axis extent will only be determined by the result of the percent of <code class="codespan">[dMin, dMax]</code>.</li>\n</ul>\n<p><code class="codespan">rangeMode</code> are auto determined by whether <code class="codespan">option.start</code>/<code class="codespan">option.end</code> are specified (represents <code class="codespan">&#39;percent&#39;</code> mode) or <code class="codespan">option.startValue</code>/<code class="codespan">option.endValue</code> specified (represents <code class="codespan">&#39;value&#39;</code> mode). And when user behavior trigger the changing of the view, the <code class="codespan">rangeMode</code> would be modified automatically. For example, if triggered by <code class="codespan">toolbox.dataZoom</code>, it will be modefied to <code class="codespan">&#39;value&#39;</code>, and if triggered by <code class="codespan">dataZoom-inside</code> or <code class="codespan">dataZoom-slider</code>, it will be modified to <code class="codespan">&#39;percent&#39;</code>.</p>\n<p>If we specify <code class="codespan">rangeMode</code> manually in <code class="codespan">option</code>, it only works when both <code class="codespan">start</code> and <code class="codespan">startValue</code> specified or both <code class="codespan">end</code> and <code class="codespan">endValue</code> specified. So usually we do not need to specify <code class="codespan">dataZoom.rangeMode</code> manually.</p>\n<p>Take a scenario as an example. When we are using dynamic data (update data periodically via <code class="codespan">setOption</code>), if in <code class="codespan">&#39;value</code>&#39; mode, the window will be kept in a fixed value range despite how data are appended, while if in <code class="codespan">&#39;percent&#39;</code> mode, whe window range will be changed alone with the appended data (suppose <code class="codespan">axis.min</code> and <code class="codespan">axis.max</code> are not specified).</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between dataZoom-slider component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between dataZoom-slider component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between dataZoom-slider component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between dataZoom-slider component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        None,
        description='\n\n<p>Width of dataZoom-slider component. Default to 30 when vertical, adaptive when horizontal.</p>\n<p>Has higer priority than <code class="codespan">left</code> and <code class="codespan">right</code>.</p>\n',
    )
    height: Optional[Union[str, float]] = Field(
        None,
        description='\n\n<p>Height of dataZoom-slider component. Default to 30 when horizontal, adaptive when vertical.</p>\n<p>Has higer priority than <code class="codespan">top</code> and <code class="codespan">bottom</code>.</p>\n',
    )
    brushSelect: Optional[bool] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to enable brush to select.</p>\n',
    )
    brushStyle: Optional[BrushStyle] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Style of brushing area.</p>\n',
    )
    emphasis: Optional[Emphasis1] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Style when highlighted.</p>\n',
    )


class DataZoom(BaseModel):
    """
        <p><code class="codespan">dataZoom</code> component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.</p>
    <p>These types of <code class="codespan">dataZoom</code> component are supported:</p>
    <ul>
    <li><p><a href="#dataZoom-inside">dataZoomInside</a>: Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).</p>
    </li>
    <li><p><a href="#dataZoom-slider">dataZoomSlider</a>: A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).</p>
    </li>
    <li><p><a href="#toolbox.feature.dataZoom">dataZoomSelect</a>: A marquee tool is provided for zooming or roaming coordinate system. That is <a href="#toolbox.feature.dataZoom">toolbox.feature.dataZoom</a>, which can only be configured in toolbox.</p>
    </li>
    </ul>
    <p>Example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1" width="600" height="400"></iframe>


    <p><br></p>
    <hr>
    <p><strong>✦ Relationship between dataZoom and axis ✦</strong></p>
    <p>Basically <code class="codespan">dataZoom</code> component operates &quot;window&quot; on axis to zoom or roam coordinate system.</p>
    <blockquote>
    <p>Use <a href="#dataZoom.xAxisIndex">dataZoom.xAxisIndex</a> or <a href="#dataZoom.yAxisIndex">dataZoom.yAxisIndex</a> or <a href="#dataZoom.radiusAxisIndex">dataZoom.radiusAxisIndex</a> or <a href="#dataZoom.angleAxisIndex">dataZoom.angleAxisIndex</a> to specify which axes are operated by <code class="codespan">dataZoom</code>.</p>
    </blockquote>
    <p>A single chart instance can contain several <code class="codespan">dataZoom</code> components, each of which controls different axes. The <code class="codespan">dataZoom</code> components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).</p>
    <p><br></p>
    <hr>
    <p><strong>✦ How dataZoom componets operates axes and data ✦</strong></p>
    <p>Generally <code class="codespan">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>
    <p>Its behaviours vary according to filtering mode settings (<a href="#dataZoom.filterMode">dataZoom.filterMode</a>).</p>
    <p>Possible values:</p>
    <ul>
    <li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>
    </li>
    <li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>
    </li>
    <li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>
    </li>
    <li><p>&#39;none&#39;: Do not filter data.</p>
    </li>
    </ul>
    <p>How to set <code class="codespan">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>
    <ul>
    <li><p>If only <code class="codespan">xAxis</code> or only <code class="codespan">yAxis</code> is controlled by <code class="codespan">dataZoom</code>, <code class="codespan">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>
    </li>
    <li><p>If both <code class="codespan">xAxis</code> and <code class="codespan">yAxis</code> are operated by <code class="codespan">dataZoom</code>:</p>
    <ul>
    <li><p>If <code class="codespan">xAxis</code> and <code class="codespan">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class="codespan">&#39;value&#39;</code>), they should be set to be <code class="codespan">filterMode: &#39;empty&#39;</code>.</p>
    </li>
    <li><p>If <code class="codespan">xAxis</code> is the main axis and <code class="codespan">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class="codespan">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class="codespan">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class="codespan">xAxis</code> should be set to be <code class="codespan">fiterMode: &#39;filter&#39;</code>, while <code class="codespan">yAxis</code> should be set to be <code class="codespan">fiterMode: &#39;empty&#39;</code>.</p>
    </li>
    </ul>
    </li>
    </ul>
    <p>It can be demonstrated by the sample:</p>
    <pre><code class="lang-javascript">option = {
        dataZoom: [
            {
                id: &#39;dataZoomX&#39;,
                type: &#39;slider&#39;,
                xAxisIndex: [0],
                filterMode: &#39;filter&#39;
            },
            {
                id: &#39;dataZoomY&#39;,
                type: &#39;slider&#39;,
                yAxisIndex: [0],
                filterMode: &#39;empty&#39;
            }
        ],
        xAxis: {type: &#39;value&#39;},
        yAxis: {type: &#39;value&#39;},
        series{
            type: &#39;bar&#39;,
            data: [
                // The first column corresponds to xAxis,
                // and the second coloum corresponds to yAxis.
                [12, 24, 36],
                [90, 80, 70],
                [3, 9, 27],
                [1, 11, 111]
            ]
        }
    }
    </code></pre>
    <p>In the sample above, <code class="codespan">dataZoomX</code> is set as <code class="codespan">filterMode: &#39;filter&#39;</code>. When use drags <code class="codespan">dataZoomX</code> (do not touch <code class="codespan">dataZoomY</code>) and the valueWindow of <code class="codespan">xAxis</code> is changed to <code class="codespan">[2, 50]</code> consequently, <code class="codespan">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>
    <pre><code class="lang-javascript">[
        [12, 24, 36],
        // [90, 80, 70] This item is filtered, as 90 is out of the window.
        [3, 9, 27]
        // [1, 11, 111] This item is filtered, as 1 is out of the window.
    ]
    </code></pre>
    <p>Before filtering, the second column, which corresponds to yAxis, has values <code class="codespan">24</code>, <code class="codespan">80</code>, <code class="codespan">9</code>, <code class="codespan">11</code>. After filtering, only <code class="codespan">24</code> and <code class="codespan">9</code> are left. Then the extent of <code class="codespan">yAxis</code> is adjusted to adapt the two values (if <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> are not set).</p>
    <p>So <code class="codespan">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>
    <p>Then let&#39;s review the sample from the beginning, <code class="codespan">dataZoomY</code> is set as <code class="codespan">filterMode: &#39;empty&#39;</code>. So if user drags <code class="codespan">dataZoomY</code> (do not touch <code class="codespan">dataZoomX</code>) and its window is changed to <code class="codespan">[10, 60]</code> consequently, <code class="codespan">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>
    <pre><code class="lang-javascript">[
        [12, 24, 36],
        [90, NaN, 70], // Set to NaN
        [3, NaN, 27],  // Set to NaN
        [1, 11, 111]
    ]
    </code></pre>
    <p>In this case, the first column (i.e., <code class="codespan">12</code>, <code class="codespan">90</code>, <code class="codespan">3</code>, <code class="codespan">1</code>, which corresponds to <code class="codespan">xAxis</code>), will not be changed at all. So dragging <code class="codespan">yAxis</code> will not change extent of <code class="codespan">xAxis</code>, which is good for requirements like outlier filtering.</p>
    <p>See this example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1" width="600" height="400"></iframe>






    <p>Moreover, when <code class="codespan">min</code>, <code class="codespan">max</code> of an axis is set (e.g., <code class="codespan">yAxis: {min: 0, max: 400}</code>), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.</p>
    <p><br></p>
    <hr>
    <p><strong>✦ How to set window ✦</strong></p>
    <p>You can set the current window in two forms:</p>
    <ul>
    <li><p>percent value: see <a href="#dataZoom.start">dataZoom.start</a> and <a href="#dataZoom.end">dataZoom.end</a>.</p>
    </li>
    <li><p>absolute value: see <a href="#dataZoom.startValue">dataZoom.startValue</a> and <a href="#dataZoom.endValue">dataZoom.endValue</a>.</p>
    </li>
    </ul>
    <p>Notice: If use percent value form, and it is in the scenario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in <code class="codespan">option</code>.</p>
    <pre><code class="lang-javascript">option = {
        dataZoom: [
            {
                id: &#39;dataZoomX&#39;,
                type: &#39;slider&#39;,
                xAxisIndex: [0],
                filterMode: &#39;filter&#39;,   // Set as &#39;filter&#39; so that the modification
                                        // of window of xAxis willl effect the
                                        // window of yAxis.
                start: 30,
                end: 70
            },
            {
                id: &#39;dataZoomY&#39;,
                type: &#39;slider&#39;,
                yAxisIndex: [0],
                filterMode: &#39;empty&#39;,
                start: 20,
                end: 80
            }
        ],
        xAxis: {
            type: &#39;value&#39;
        },
        yAxis: {
            type: &#39;value&#39;
            // Notice there is no min or max set to
            // restrict the view extent of yAxis.
        },
        series{
            type: &#39;bar&#39;,
            data: [
                // The first column corresponds to xAxis,
                // and the second column corresponds to yAxis.
                [12, 24, 36],
                [90, 80, 70],
                [3, 9, 27],
                [1, 11, 111]
            ]
        }
    }
    </code></pre>
    <p>What is the exact meaning of <code class="codespan">start: 20, end: 80</code> in <code class="codespan">dataZoomY</code> in the example above?</p>
    <ul>
    <li><p>If <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> are set:</p>
    <p>  <code class="codespan">start: 20, end: 80</code> of <code class="codespan">dataZoomY</code> means: from <code class="codespan">20%</code> to <code class="codespan">80%</code> out of <code class="codespan">[yAxis.min, yAxis.max]</code>.</p>
    <p>  If one of <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> is not set, the corresponding edge of the full extend also follow rule as follows.</p>
    </li>
    <li><p>If <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> are not set:</p>
    <ul>
    <li><p>If <code class="codespan">dataZoomX</code> is set to be <code class="codespan">filterMode: &#39;empty&#39;</code>:</p>
    <p>  <code class="codespan">start: 20, end: 80</code> of <code class="codespan">dataZoomY</code> means: from <code class="codespan">20%</code> to <code class="codespan">80%</code> out of <code class="codespan">[dataMinY to dataMaxY]</code> of series.data (i.e., <code class="codespan">[9, 80]</code> in the example above).</p>
    </li>
    <li><p>If <code class="codespan">dataZoomX</code> is set to <code class="codespan">filterMode: &#39;filter&#39;</code>:</p>
    <p>  Since <code class="codespan">dataZoomX</code> is defined before <code class="codespan">dataZoomY</code>, <code class="codespan">start: 30, end: 70</code> of <code class="codespan">dataZoomX</code> means: from <code class="codespan">30%</code> to <code class="codespan">70%</code> out of full series.data, whereas <code class="codespan">start: 20, end: 80</code> of <code class="codespan">dataZoomY</code> means: from <code class="codespan">20%</code> to <code class="codespan">80%</code> out of the series.data having been filtered by <code class="codespan">dataZoomX</code>.</p>
    <p>  If you want to change the process sequence, you can just change the sequence of the definitions apearing in <code class="codespan">option</code>.</p>
    </li>
    </ul>
    </li>
    </ul>
    <p><br>
    <br></p>

    """

    pass


class Controller(BaseModel):
    """
    <p>Property <code class="codespan">inRange</code> and <code class="codespan">outOfRange</code> can be set within property <code class="codespan">controller</code>, which means those <code class="codespan">inRange</code> and <code class="codespan">outOfRange</code> are only used on the controller (<code class="codespan">visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.</p>

    """

    inRange: Optional[Any] = Field(
        None,
        description='<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<p>See available configurations in <a href="#visualMap-continuous.inRange">visualMap-continuous.inRange</a></p>\n',
    )
    outOfRange: Optional[Any] = Field(
        None,
        description='<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<p>See available configurations in <a href="#visualMap-continuous.inRange">visualMap-continuous.inRange</a></p>\n',
    )


class TextStyle9(BaseModel):
    color: Optional[Any] = Field(
        '#333', description='\n\n<p>visualMap  text color.</p>\n'
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>visualMap  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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>visualMap  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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>visualMap  font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>visualMap  font size.</p>\n'
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )


class HandleStyle2(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Style of drag handle.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#fff',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class IndicatorStyle(BaseModel):
    """
    <p>Style of indicator.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#fff',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        2,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        2,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'rgba(0,0,0,0.2)',
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        1,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        1,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class VisualMapItem(BaseModel):
    """
        <p><strong>Continuous visualMap component (visualMapContinuous)</strong></p>
    <p> (See <a href="#visualMap">the introduction to visual Map component (visualMap)</a>)</p>
    <p>You can set <a href="#visualMap.calculable">visualMap.calculable</a> to show or hide the handles, which are used to change the selected range in <code class="codespan">visualMapContinuous</code>.</p>
    <p><br>
    <br></p>

    """

    type: Optional[str] = Field(
        'continuous',
        description='<p>Used to determine that it is a continuous visualMap component.</p>\n',
    )
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    min: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the min dataValue for the visualMap component. <code class="codespan">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>Notice that <code class="codespan">min</code> and <code class="codespan">max</code> should be specified explicitly, and be <code class="codespan">[0, 200]</code> by default, but not <code class="codespan">dataMin</code> and <code class="codespan">dataMax</code> in series.data.</p>\n',
    )
    max: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the max dataValue for the visualMap component. <code class="codespan">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>Notice that <code class="codespan">min</code> and <code class="codespan">max</code> should be specified explicitly, and be <code class="codespan">[0, 200]</code> by default, but not <code class="codespan">dataMin</code> and <code class="codespan">dataMax</code> in series.data.</p>\n',
    )
    range: Optional[Any] = Field(
        None,
        description='<p>Specify selected range, that is, the dataValue corresponding to the two handles. For example:</p>\n<pre><code class="lang-javascript">chart.setOption({\n    visualMap: {\n        min: 0,\n        max: 100,\n        // dataValue corresponding to the two handles.\n        range: [4, 15],\n        ...\n    }\n});\n</code></pre>\n<p><strong>auto-adaption when min or max is modified by setOption</strong></p>\n<ul>\n<li>If <code class="codespan">range</code> is not set (or set to null or undefined)</li>\n</ul>\n<pre><code class="lang-javascript">For instance:\nchart.setOption({visualMap: {min: 10, max: 300}}); // range is not set, then range is [min, max] by default, that is, [10, 300].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // Modify min and max using setOption again.\n// Then range will be auto-modified to the new [min, max], that is, [0, 400].\n</code></pre>\n<ul>\n<li>If <code class="codespan">range</code> is set explicitly, such as [10, 300]</li>\n</ul>\n<pre><code class="lang-javascript">For instance:\nchart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // range is set to [20, 80].\n\nchart.setOption({visualMap: {min: 0, max: 400}}); // min and max are modifies using setOption.\n// Then range keep the original value ([20, 80]) but will not do auto-adaption.\n\nchart.setOption({visualMap: {range: null}}); // Set range to null then.\n// Then auto-adaption of range turns on and range is auto modified to [min, max], that is, [0, 400].\n\n</code></pre>\n<p><code class="codespan">range</code> gotten by <code class="codespan">getOption</code> is always an <code class="codespan">Array</code>, but not <code class="codespan">null</code> or <code class="codespan">undefined</code>.</p>\n',
    )
    calculable: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether show handles, which can be dragged to adjust &quot;selected range&quot;.</p>\n<p>Notes: In order to be compatible with ECharts2, the rule, which seems to be a little odd, is retained: when <a href="#visualMap.type">visualMap.type</a> is not set, and <a href="#visualMap-continuous.calculable">visualMap.calculable</a> was set to be <code class="codespan">true</code>, <a href="#visualMap.type">visualMap.type</a> will be automatically set as <code class="codespan">&#39;continuous&#39;</code>, regardless of some settings such as <a href="#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a>. Therefore, it is recommended to set <a href="#visualMap.type">visualMap.type</a> explicitly, which avoids ambiguity.</p>\n',
    )
    realtime: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to update view in real time when dragging a handle.</p>\n<ul>\n<li><p>If <code class="codespan">true</code>, the chart view will be updated in real time when dragging.</p>\n</li>\n<li><p>If <code class="codespan">false</code>, the chart view will be updated at the end of the handle dragging.</p>\n</li>\n</ul>\n',
    )
    inverse: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to inverse the layout of visualMap component.</p>\n<p>As <code class="codespan">inverse</code> is <code class="codespan">false</code>, the layout direction is the same as <a href="#grid">cartesian coordinate</a>. That is:</p>\n<ul>\n<li>As <a href="#visualMap.orient">visualMap.orient</a> is <code class="codespan">&#39;vertical&#39;</code>, large data are placed at the top while small at the bottom.</li>\n<li>As <a href="#visualMap.orient">visualMap.orient</a> is <code class="codespan">&#39;horizontal&#39;</code>,  large data are placed on the right while small on the left.</li>\n</ul>\n<p>As <code class="codespan">inverse</code> is <code class="codespan">true</code>, the result is opposite.</p>\n',
    )
    precision: Optional[float] = Field(
        0,
        description='\n\n<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n',
    )
    itemWidth: Optional[float] = Field(
        20, description='\n\n<p>The width of the main bar of visualMap component.</p>\n'
    )
    itemHeight: Optional[float] = Field(
        140,
        description='\n\n<p>The height of the main bar of visualMap component.</p>\n',
    )
    align: Optional[str] = Field(
        'auto',
        description='\n\n<p>Specify the position of handles and labels, against the main bar. The possible values are:</p>\n<ul>\n<li><code class="codespan">&#39;auto&#39;</code> Decide automatically.</li>\n<li><code class="codespan">&#39;left&#39;</code> The handles and labels are on the right, which is valid when <code class="codespan">orient</code> is set as <code class="codespan">&#39;horizontal&#39;</code>.</li>\n<li><code class="codespan">&#39;right&#39;</code> The handles and labels are on the left, which is valid when <code class="codespan">orient</code> is set as <code class="codespan">&#39;horizontal&#39;</code>.</li>\n<li><code class="codespan">&#39;top&#39;</code> the handles and labels are at the bottom, which is valid when <code class="codespan">orient</code> is set as  <code class="codespan">&#39;vertical&#39;</code>.</li>\n<li><code class="codespan">&#39;bottom&#39;</code> the handles and labels are at the top, which is valid when <code class="codespan">orient</code> is set as <code class="codespan">&#39;vertical&#39;</code>.</li>\n</ul>\n',
    )
    text: Optional[Any] = Field(
        None,
        description='<p>The label text on both ends, such as <code class="codespan">[&#39;High&#39;, &#39;Low&#39;]</code>. <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/map-visualMap-continuous-text&amp;edit=1&amp;reset=1" target="_blank">sample</a>.</p>\n<p>You can understand the order of items in <code class="codespan">text</code> array just by a simple trial. See <a href="#visualMap.inverse">visualMap.inverse</a>.</p>\n',
    )
    textGap: Optional[float] = Field(
        10,
        description='\n\n<p>The distance between the ends of the main bar and the label, with unit px. See <a href="#visualMap-continuous.text">visualMap-continuous.text</a></p>\n',
    )
    show: Optional[bool] = Field(
        True,
        description='<p>Whether to show visualMap-continuous component. If set as <code class="codespan">false</code>, visualMap-continuous component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.</p>\n',
    )
    dimension: Optional[str] = Field(
        None,
        description='<p>Specify which dimension should be used to fetch dataValue from <a href="#series.data">series.data</a>, and then map them to visual channel.</p>\n<p><a href="#series.data">series.data</a> can be regarded as a two-dimensional array, for instance:</p>\n<pre><code class="lang-javascript">[\n    [12, 23, 43],\n    [12, 23, 43],\n    [43, 545, 65],\n    [92, 23, 33]\n]\n</code></pre>\n<p>Each column of the above array is regarded as a <code class="codespan">dimension</code>. For example, when property <code class="codespan">dimension</code> is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.</p>\n<p>Use the last dimension of <code class="codespan">data</code> by default.</p>\n',
    )
    seriesIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify visual mapping should be performed on which series, from which\n<a href="#series.data">series.data</a> is fetched.</p>\n<p>All series are used by default.</p>\n',
    )
    hoverLink: Optional[bool] = Field(
        True,
        description='<p><code class="codespan">hoverLink</code> enable highlight certain graphical elements of chart when mouse hovers on some place of <code class="codespan">visualMap</code> component that is coresponding to those graphical elements by visual mapping.</p>\n<p>Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in <code class="codespan">visualMap</code>.</p>\n',
    )
    inRange: Optional[Any] = Field(
        None,
        description='<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<ul>\n<li><code class="codespan">symbol</code>: Type of symbol.</li>\n<li><code class="codespan">symbolSize</code>: Symbol size.</li>\n<li><code class="codespan">color</code>: Symbol color.</li>\n<li><code class="codespan">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class="codespan">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class="codespan">colorLightness</code>: Lightness in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorSaturation</code>: Saturation in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorHue</code>: Hue in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n</ul>\n<p><code class="codespan">inRange</code> could customize visual channels both in series (by <a href="#visualMap-continuous.seriesIndex">visualMap-continuous.seriesIndex</a>) and in <code class="codespan">visualMap-continuous</code> itself.</p>\n<p>For instance, if a <code class="codespan">visualMap-continuous</code> component is used on a scatter chart, the mapping approach from data to <code class="codespan">color</code> (or <code class="codespan">symbol</code>, <code class="codespan">size</code>, ...) can be both customized in the scatter chart and <code class="codespan">visualMap-continuous</code> component itself. See the code as following:</p>\n<pre><code class="lang-javascript">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-continuous component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-continuous component separately, you should do as follows:</p>\n<pre><code class="lang-javascript">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-continuous component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class="lang-javascript">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-continuous component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-continuous component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class="codespan">color</code>、<code class="codespan">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class="codespan">opacity</code> is recommended, rather than <code class="codespan">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class="codespan">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class="codespan">[visaulMap.min, visualMap.max]</code> to a given range of <code class="codespan">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class="codespan">[visualMap.min, visualMap.max]</code> is set to be <code class="codespan">[0, 100]</code>, and there is series.data: <code class="codespan">[50, 10, 100]</code>. We intend to map them to an <code class="codespan">opacity</code> range <code class="codespan">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class="codespan">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class="codespan">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class="codespan">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class="codespan">dataMin</code> and <code class="codespan">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href="#visualMap-continuous">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href="#visualMap-piecewise">visualMap-piecewise</a> and <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class="codespan">Array</code> is used to express the range of visual value, e.g., <code class="codespan">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class="codespan">number</code> or single <code class="codespan">string</code> can also be used, which will be converted to an <code class="codespan">Array</code> by visualMap component. e.g.:  <code class="codespan">opacity: 0.4</code> will be converted to <code class="codespan">opacity: [0.4, 0.4]</code>, <code class="codespan">color: &#39;#333&#39;</code> will be converted to <code class="codespan">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class="codespan">symbolSize</code>, <code class="codespan">opacity</code>, <code class="codespan">colorAlpha</code>, <code class="codespan">colorLightness</code>, <code class="codespan">colorSaturation</code>, <code class="codespan">colorHue</code>, the range of visual value is always in the form of: <code class="codespan">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class="codespan">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class="codespan">visualMap.min</code> (if any) will be mapped to lightness <code class="codespan">0.8</code>, and the dataValue that equals to <code class="codespan">visualMap.max</code> (if any) will be mapped to lightness <code class="codespan">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class="codespan">[visualMap.min, visualMap.max]</code> and the range of <code class="codespan">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class="codespan">color</code>, array is used, like: <code class="codespan">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class="codespan">visualMap.min</code> will be mapped onto <code class="codespan">&#39;#333&#39;</code>, the dataValue that equals to <code class="codespan">visualMap.max</code> will be mapped onto <code class="codespan">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class="codespan">symbol</code>, array is used, like: <code class="codespan">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class="codespan">visualMap.min</code> will be mapped onto <code class="codespan">&#39;circle&#39;</code>, the dataValue that equals to <code class="codespan">visualMap.max</code> will be mapped onto <code class="codespan">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class="codespan">visualMax.min</code> and to <code class="codespan">visualMap.max</code>, and mapped onto one of <code class="codespan">&#39;circle&#39;</code>, <code class="codespan">&#39;rect&#39;</code>, <code class="codespan">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class="codespan">opacity</code>、<code class="codespan">colorAlpha</code>、<code class="codespan">colorLightness</code>、<code class="codespan">colorSaturation</code>、<code class="codespan">visual value</code></p>\n<p>  possible value range is <code class="codespan">[0, 1]</code>.</p>\n</li>\n<li><p><code class="codespan">colorHue</code>：</p>\n<p>  possible value range is <code class="codespan">[0, 360]</code>.</p>\n</li>\n<li><p><code class="codespan">color</code>：</p>\n<p>  color can use RGB expression, like <code class="codespan">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class="codespan">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class="codespan">symbol</code>：</p>\n</li>\n</ul>\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><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class="codespan">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href="#visualMap.dimension">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href="#visualMap-piecewise">visualMap-piecewise</a> component, <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is set to <code class="codespan">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class="codespan">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class="codespan">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class="codespan">visualMap</code> component will map <code class="codespan">dataValue</code> to <code class="codespan">color</code>.</p>\n<p>How to configure <code class="codespan">visualMap</code> component to do <code class="codespan">Table Mapping</code>?</p>\n<p>When use <a href="#visualMap-piecewise">visualMap-piecewise</a> and <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class="codespan">Object</code> or <code class="codespan">Array</code> is used, for instance:</p>\n<pre><code class="lang-javascript">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1" target="_blank">Example</a></p>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class="codespan">setOption</code> to set the initial <code class="codespan">option</code>), <code class="codespan">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class="lang-javascript">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class="codespan">inRange</code>, <code class="codespan">outOfRange</code>, <code class="codespan">target</code>, <code class="codespan">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class="codespan">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class="codespan">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class="codespan">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class="lang-javascript">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class="codespan">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class="codespan">inRange</code> if you not set <code class="codespan">inRange</code>. If you dont want it, set <code class="codespan">inRange: {color: null}</code> to disable it.</p>\n',
    )
    outOfRange: Optional[Any] = Field(
        None,
        description='<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<p>See available configurations in <a href="#visualMap-continuous.inRange">visualMap-continuous.inRange</a></p>\n',
    )
    controller: Optional[Controller] = Field(
        None,
        description='<p>Property <code class="codespan">inRange</code> and <code class="codespan">outOfRange</code> can be set within property <code class="codespan">controller</code>, which means those <code class="codespan">inRange</code> and <code class="codespan">outOfRange</code> are only used on the controller (<code class="codespan">visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        4,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        0,
        description='<p>Distance between visualMap  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between visualMap  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between visualMap  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        0,
        description='<p>Distance between visualMap  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    orient: Optional[str] = Field(
        'vertical',
        description='<p>How to layout the visualMap component, <code class="codespan">&#39;horizontal&#39;</code> or <code class="codespan">&#39;vertical&#39;</code>.</p>\n',
    )
    padding: Optional[Union[float, Any]] = Field(
        5,
        description='\n\n<p>visualMap-continuous space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples:</p>\n<pre><code class="lang-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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(0,0,0,0)', description='<p>background color of visualMap component.</p>\n'
    )
    borderColor: Optional[Any] = Field(
        '#ccc', description='<p>border color of visualMap component.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='<p>border width of visualMap component, with unit: px.</p>\n'
    )
    color: Optional[Any] = Field(
        "['#bf444c', '#d88273', '#f6efa6']",
        description='<p>This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in <a href="#visualMap-continuous.inRange">visualMap-continuous.inRange</a>, or <a href="#visualMap-continuous.outOfRange">visualMap-continuous.outOfRange</a> if needed.</p>\n<p>If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property <code class="codespan">color</code> is from <code class="codespan">large</code> to <code class="codespan">small</code>, whereas that in <a href="#visualMap-continuous.inRange">visualMap-continuous.inRange</a> or <a href="#visualMap-continuous.outOfRange">visualMap-continuous.outOfRange</a> is from <code class="codespan">small</code> to <code class="codespan">large</code>.</p>\n',
    )
    textStyle: Optional[TextStyle9] = Field(None, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>the formatter tool for label.</p>\n<ul>\n<li><p>If it was set as a <code class="codespan">string</code>, it refers to a template, for instance: <code class="codespan">aaaa{value}bbbb</code>, where <code class="codespan">{value}</code> represents the value of the edge of the seleted range.</p>\n</li>\n<li><p>If it was set as a <code class="codespan">Function</code>, it refers to a callback function, for instance:</p>\n</li>\n</ul>\n<pre><code class="lang-javascript">formatter: function (value) {\n    return &#39;aaaa&#39; + value + &#39;bbbb&#39;;\n}\n</code></pre>\n',
    )
    handleIcon: Optional[str] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n\n\n<p>Icon of drag handle.</p>\n<pre><code class="lang-ts">&#39;M-11.39,9.77h0a3.5,3.5,0,0,1-3.5,3.5h-22a3.5,3.5,0,0,1-3.5-3.5h0a3.5,3.5,0,0,1,3.5-3.5h22A3.5,3.5,0,0,1-11.39,9.77Z&#39;\n</code></pre>\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>',
    )
    handleSize: Optional[Union[float, str]] = Field(
        '120%',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Size of drag handle. It can be a percent string.</p>\n',
    )
    handleStyle: Optional[HandleStyle2] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Style of drag handle.</p>\n',
    )
    indicatorIcon: Optional[str] = Field(
        'circle',
        description='<p>Icon of indicator.</p>\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n\n',
    )
    indicatorSize: Optional[Union[float, str]] = Field(
        '50%',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Size of indicator. It can be a percent string.</p>\n',
    )
    indicatorStyle: Optional[IndicatorStyle] = Field(
        None, description='<p>Style of indicator.</p>\n'
    )


class Controller1(BaseModel):
    """
    <p>Property <code class="codespan">inRange</code> and <code class="codespan">outOfRange</code> can be set within property <code class="codespan">controller</code>, which means those <code class="codespan">inRange</code> and <code class="codespan">outOfRange</code> are only used on the controller (<code class="codespan">visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.</p>

    """

    inRange: Optional[Any] = Field(
        None,
        description='<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<p>See available configurations in <a href="#visualMap-piecewise.inRange">visualMap-piecewise.inRange</a></p>\n',
    )
    outOfRange: Optional[Any] = Field(
        None,
        description='<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<p>See available configurations in <a href="#visualMap-piecewise.inRange">visualMap-piecewise.inRange</a></p>\n',
    )


class TextStyle10(TextStyle9):
    pass


class VisualMapItem1(BaseModel):
    """
        <p><strong>Piecewise visualMap component (visualMapPiecewise) </strong></p>
    <p> (Reference to <a href="#visualMap">the introduction of visual Map component (visualMap)</a>)</p>
    <p>Sample:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/scatter-visualMap-piecewise&edit=1&reset=1" width="600" height="400"></iframe>



    <p>Piecewise visualMap component works in one of the three modes:</p>
    <ul>
    <li><strong>CONTINUOUS-AVERAGE</strong>: The series.data is continuous and is divided into pieces averagely according to <a href="#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a>.</li>
    <li><strong>CONTINUOUS-CUSTOMIZED</strong>: The series.data is continuous and is divided into pieces according to the given rule defined in <a href="#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a>.</li>
    <li><strong>CATEGORY</strong>: The series.data is discrete and is categorized according to <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a>.</li>
    </ul>
    <p><br>
    <br></p>

    """

    type: Optional[str] = Field(
        'piecewise',
        description='<p>Used to determine it is a piecewise visualMap component.</p>\n',
    )
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        5,
        description='\n\n<p>Continuous data can be divide into pieces averagely according to splitNumber, that is, if splitNumber is 5, data will be sliced into 5 pieces.</p>\n<p>The range of continuous data should be defined by <a href="#visualMap-piecewise.max">max</a> and <a href="#visualMap-piecewise.min">min</a>.</p>\n<p>If <a href="#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> or <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is set up, the <code class="codespan">splitNumber</code> will not be used any more.</p>\n',
    )
    pieces: Optional[Any] = Field(
        None,
        description='<p>Used to customize how to slice continuous data, and some specific view style for some pieces. For instance:</p>\n<pre><code class="lang-javascript">pieces: [\n    // Range of a piece can be specified by property min and max,\n    // where min will be set as -Infinity if ignored,\n    // and max will be set as Infinity if ignored.\n    {min: 1500},\n    {min: 900, max: 1500},\n    {min: 310, max: 1000},\n    {min: 200, max: 300},\n    // Label of the piece can be specified.\n    {min: 10, max: 200, label: &#39;10 to 200 (custom label) &#39;},\n    // Color of the piece can be specified.\n    {value: 123, label: &#39;123 (custom special color) &#39;, color: &#39;grey&#39;},\n    {max: 5}\n]\n</code></pre>\n<p>These visual channel can be customized in each piece:</p>\n<ul>\n<li><code class="codespan">symbol</code>: Type of symbol.</li>\n<li><code class="codespan">symbolSize</code>: Symbol size.</li>\n<li><code class="codespan">color</code>: Symbol color.</li>\n<li><code class="codespan">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class="codespan">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class="codespan">colorLightness</code>: Lightness in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorSaturation</code>: Saturation in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorHue</code>: Hue in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n</ul>\n<p> (Notes: In ECharts2, <code class="codespan">pieces</code> is called <code class="codespan">splitList</code>, which is retained in ECharts3 for compatibility. But <code class="codespan">pieces</code> is recommended.)</p>\n<p>You would realize the sequence in <code class="codespan">pieces</code> by a simple trial. See more detailed rules in <a href="#visualMap.inverse">visualMap.inverse</a>.</p>\n',
    )
    categories: Optional[Any] = Field(
        None,
        description='<p>When dataValues in series.data (specified by <a href="#visualMap-piecewise.dimension">visualMap-piecewise.dimension</a>) are discrete (or also known as category data or enumerable data), and we intend to perform <strong>Table Mapping</strong> from dataValue to visual channels, <code class="codespan">categories</code> is used to describe the entire enumeration of data. For instance:</p>\n<pre><code class="lang-javascript">categories: [\n    &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n],\n</code></pre>\n<p><a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1" target="_blank">Sample</a></p>\n<p>You would realize the sequence in <code class="codespan">categories</code> by a simple trial. See more detailed rules in <a href="#visualMap.inverse">visualMap.inverse</a>.</p>\n',
    )
    min: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the min dataValue for the visualMap component. <code class="codespan">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href="#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is used), <code class="codespan">max</code> and <code class="codespan">min</code> doesn&#39;t need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href="#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code class="codespan">[0, 200]</code> by default, but not <code class="codespan">dataMin</code> and <code class="codespan">dataMax</code> in series.data.</p>\n',
    )
    max: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the max dataValue for the visualMap component. <code class="codespan">[visualMap.min, visualMax.max]</code> make up the domain of viusul mapping.</p>\n<p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href="#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is used), <code class="codespan">max</code> and <code class="codespan">min</code> doesn&#39;t need to be specified.</p>\n<p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href="#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> is used), they should be specified explicitly, and be <code class="codespan">[0, 200]</code> by default, but not <code class="codespan">dataMin</code> and <code class="codespan">dataMax</code> in series.data.</p>\n',
    )
    minOpen: Optional[bool] = Field(
        None,
        description='\n\n<p>This option works when <code class="codespan">type</code> is <code class="codespan">piecewise</code> and <code class="codespan">min</code>/<code class="codespan">max</code>/<code class="codespan">splitNumber</code> are set.</p>\n<p>If it is set as <code class="codespan">true</code>, an extra piece labeled with &quot;&lt; min&quot; will show.</p>\n',
    )
    maxOpen: Optional[bool] = Field(
        None,
        description='\n\n<p>This option works when <code class="codespan">type</code> is <code class="codespan">piecewise</code> and <code class="codespan">min</code>/<code class="codespan">max</code>/<code class="codespan">splitNumber</code> are set.</p>\n<p>If it is set as <code class="codespan">true</code>, an extra piece labeled with &quot;&gt; max&quot; will show.</p>\n',
    )
    selectedMode: Optional[Union[str, bool]] = Field(
        'multiple',
        description='\n\n<p>Selected Mode could be:</p>\n<ul>\n<li><code class="codespan">&#39;multiple&#39;</code> (multiple selection).</li>\n<li><code class="codespan">&#39;single&#39;</code> (single selection).</li>\n<li><code class="codespan">true</code> (single selection) since version <code class="codespan">5.3.3</code>.</li>\n<li><code class="codespan">false</code> (no selection) since version <code class="codespan">5.3.3</code>.</li>\n</ul>\n',
    )
    inverse: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to inverse the layout of visualMap component.</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href="#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href="#visualMap-continuous.inverse">visualMap-continuous.inverse</a>.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href="#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is used), the layout of each piece is determined by the their order in the definition of <code class="codespan">pieces</code> or <code class="codespan">categories</code>, namely:</p>\n<ul>\n<li><p>When <code class="codespan">inverse</code> is <code class="codespan">false</code>:</p>\n<ul>\n<li><p>When <a href="#visualMap.orient">visualMap.orient</a> is <code class="codespan">&#39;vertical&#39;</code>, pieces[0] or categories[0] correspond to upward side.</p>\n</li>\n<li><p>When <a href="#visualMap.orient">visualMap.orient</a> is <code class="codespan">&#39;horizontal&#39;</code>, pieces[0] or categories[0] correspond to left side.</p>\n</li>\n</ul>\n</li>\n<li><p>When <code class="codespan">inverse</code> is <code class="codespan">true</code>, the results are opposite to above.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>If you just have a try, you&#39;ll know it is not so complicated.</p>\n',
    )
    precision: Optional[float] = Field(
        None,
        description='\n\n<p>The decimal precision of label, defaults to be 0 (no decimals).</p>\n<ul>\n<li><p>In <strong>CONTINUOUS-AVERAGE</strong> mode (i.e., <a href="#visualMap-piecewise.splitNumber">visualMap-piecewise.splitNumber</a> is used), the rule of data layout is the same as <a href="#visualMap-continuous.inverse">visualMap-continuous.inverse</a>, decimal percision auto adapts to series.data.</p>\n</li>\n<li><p>In <strong>CONTINUOUS-CUSTOMIZED</strong> mode (i.e., <a href="#visualMap-piecewise.pieces">visualMap-piecewise.pieces</a> is used) or <strong>CATEGORY</strong> mode (i.e., <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is used), decimal percision defaults to be 0 (no decimals):</p>\n</li>\n</ul>\n',
    )
    itemWidth: Optional[float] = Field(
        20,
        description='\n\n<p>The width of each graphical element that represents a piece.</p>\n',
    )
    itemHeight: Optional[float] = Field(
        14,
        description='\n\n<p>The height of each graphical element that represents a piece.</p>\n',
    )
    align: Optional[str] = Field(
        'auto',
        description='\n\n<p>The layout relationship between the graphical elements for pieces and their labels. Possible values are:</p>\n<ul>\n<li><code class="codespan">&#39;auto&#39;</code> Decide automatically.</li>\n<li><code class="codespan">&#39;left&#39;</code> The graphical elements for pieces are on the left and their labels are on the right.</li>\n<li><code class="codespan">&#39;right&#39;</code> The graphical elements for pieces are on the right and their labels are on the left.</li>\n</ul>\n',
    )
    text: Optional[Any] = Field(
        None,
        description='<p>The label text on both ends, such as <code class="codespan">[&#39;High&#39;, &#39;Low&#39;]</code>. <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/map-visualMap-piecewise-text&amp;edit=1&amp;reset=1" target="_blank">Sample</a>.</p>\n<p>You can understand the order of items in <code class="codespan">text</code> array just by a simple trial. See <a href="#visualMap.inverse">visualMap.inverse</a>.</p>\n<p>The rule, that labels will not show when <code class="codespan">text</code> is use, is retained for compatibility with ECharts2.</p>\n',
    )
    textGap: Optional[float] = Field(
        10,
        description='\n\n<p>The distance between the ends of the graphical elements for pieces and the labels, with unit px. See <a href="#visualMap-piecewise.text">visualMap-piecewise.text</a></p>\n',
    )
    showLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show label of each item. By default, label will not be shown when <a href="#visualMap-piecewise.text">visualMap-piecewise.text</a> used, otherwise label will be shown.</p>\n',
    )
    itemGap: Optional[Any] = Field(
        10,
        description='\n\n<p>Its the distance between each two graphical elements for pieces. The unit is px.</p>\n',
    )
    itemSymbol: Optional[str] = Field(
        'roundRect',
        description='<p>Default symbol (the shape of graphical element). Possible values are:</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>The setting of visual channel <code class="codespan">symbol</code> can refer to <a href="#visualMap-piecewise.inRange">visualMap-piecewise.inRange</a> and <a href="#visualMap-piecewise.outOfRange">visualMap-piecewise.outOfRange</a>.</p>\n<p>When they are not specified, <code class="codespan">itemSymbol</code> is adopted as the default value (but just used in visualMap component itself, not in chart).</p>\n',
    )
    show: Optional[bool] = Field(
        True,
        description='<p>Whether to show visualMap-piecewise component. If set as <code class="codespan">false</code>, visualMap-piecewise component will not show, but it can still perform visual mapping from dataValue to visual channel in chart.</p>\n',
    )
    dimension: Optional[str] = Field(
        None,
        description='<p>Specify which dimension should be used to fetch dataValue from <a href="#series.data">series.data</a>, and then map them to visual channel.</p>\n<p><a href="#series.data">series.data</a> can be regarded as a two-dimensional array, for instance:</p>\n<pre><code class="lang-javascript">[\n    [12, 23, 43],\n    [12, 23, 43],\n    [43, 545, 65],\n    [92, 23, 33]\n]\n</code></pre>\n<p>Each column of the above array is regarded as a <code class="codespan">dimension</code>. For example, when property <code class="codespan">dimension</code> is set to 1, the second column (i.e., 23, 23, 545, 23) is chosen to perform visual mapping.</p>\n<p>Use the last dimension of <code class="codespan">data</code> by default.</p>\n',
    )
    seriesIndex: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Specify visual mapping should be performed on which series, from which\n<a href="#series.data">series.data</a> is fetched.</p>\n<p>All series are used by default.</p>\n',
    )
    hoverLink: Optional[bool] = Field(
        True,
        description='<p><code class="codespan">hoverLink</code> enable highlight certain graphical elements of chart when mouse hovers on some place of <code class="codespan">visualMap</code> component that is coresponding to those graphical elements by visual mapping.</p>\n<p>Inversely, when mouse hovers a graphical element of chart, its value label will be displayed on its corresponding position in <code class="codespan">visualMap</code>.</p>\n',
    )
    inRange: Optional[Any] = Field(
        None,
        description='<p>Define visual channels that will mapped from dataValues that are <strong>in selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<ul>\n<li><code class="codespan">symbol</code>: Type of symbol.</li>\n<li><code class="codespan">symbolSize</code>: Symbol size.</li>\n<li><code class="codespan">color</code>: Symbol color.</li>\n<li><code class="codespan">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class="codespan">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class="codespan">colorLightness</code>: Lightness in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorSaturation</code>: Saturation in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorHue</code>: Hue in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n</ul>\n<p><code class="codespan">inRange</code> could customize visual channels both in series (by <a href="#visualMap-piecewise.seriesIndex">visualMap-piecewise.seriesIndex</a>) and in <code class="codespan">visualMap-piecewise</code> itself.</p>\n<p>For instance, if a <code class="codespan">visualMap-piecewise</code> component is used on a scatter chart, the mapping approach from data to <code class="codespan">color</code> (or <code class="codespan">symbol</code>, <code class="codespan">size</code>, ...) can be both customized in the scatter chart and <code class="codespan">visualMap-piecewise</code> component itself. See the code as following:</p>\n<pre><code class="lang-javascript">visualMap: [\n    {\n        ...,\n        // Define visual channels both in target series and visualMap-piecewise component itself:\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [30, 100]\n        }\n    }\n]\n</code></pre>\n<p>If you want to define visual channels for target series and visualMap-piecewise component separately, you should do as follows:</p>\n<pre><code class="lang-javascript">visualMap: [\n    {\n        ...,\n        // Define visual channels only for target series.\n        target: {\n            inRange: {\n                color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n                symbolSize: [60, 200]\n            }\n        },\n        // Define visual channels only for visualMap-piecewise component.\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p>Or define as follows:</p>\n<pre><code class="lang-javascript">visualMap: [\n    {\n        ...,\n        // Define visual channels for both target series and visualMap-piecewise component.\n        inRange: {\n            color: [&#39;#121122&#39;, &#39;rgba(3,4,5,0.4)&#39;, &#39;red&#39;],\n            symbolSize: [60, 200]\n        },\n        // Define visual channels only for visualMap-piecewise component, which\n        // will overlap the properties with the same name in the above common\n        // definition. (symbolSize is overlapped by [30, 100] while color\n        // keeps the original value)\n        controller: {\n            inRange: {\n                symbolSize: [30, 100]\n            }\n        }\n    }\n]\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>✦ About visual channels ✦</strong></p>\n<ul>\n<li><p>Various visual channels (such as <code class="codespan">color</code>、<code class="codespan">symbolSize</code> and ect.) can be defined in inRange at the same time and all of them will be apopted.</p>\n</li>\n<li><p>Basically visual channels <code class="codespan">opacity</code> is recommended, rather than <code class="codespan">colorAlpha</code>. The former controls the transparency of both graphical element and its attachments (like label), whereas the latter only controls the transparency of graphical element.</p>\n</li>\n<li><p>There are two approaches of visual mapping supported: &#39;Linear Mapping&#39; and &#39;Table Mapping&#39;.</p>\n</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>✦ Linear Mapping to visual channel ✦</strong></p>\n<p><code class="codespan">Linear Mapping</code> means that linear calculation will be performed on each dataValue (value of series.data), mapping them from the domain of <code class="codespan">[visaulMap.min, visualMap.max]</code> to a given range of <code class="codespan">[visual value 1, visual value 2]</code> and obtaining a final value (say visual value) for visual channel rendering.</p>\n<p>For instance, <code class="codespan">[visualMap.min, visualMap.max]</code> is set to be <code class="codespan">[0, 100]</code>, and there is series.data: <code class="codespan">[50, 10, 100]</code>. We intend to map them to an <code class="codespan">opacity</code> range <code class="codespan">[0.4, 1]</code>, by which the size of value can be demostrated by the transparency of graphical elements. visualMap component will then linear calculate them and get opacity values <code class="codespan">[0.7, 0.44, 1]</code>, cooresponding to each dataValue.</p>\n<p>We can also set the visual range inversely, such as <code class="codespan">opacity: [1, 0.4]</code>, and the final mapping result for the given series.data above will be <code class="codespan">[0.7, 0.96, 0.4]</code>.</p>\n<p>Notice: [visualMap.min, visualMap.max] should be set manually and is [0, 100] by default, but not <code class="codespan">dataMin</code> and <code class="codespan">dataMax</code> in series.data.</p>\n<p>How to configure visualMap component to do Linear Mapping?</p>\n<ul>\n<li><p>When use <a href="#visualMap-continuous">visualMap-continuous</a>, or</p>\n</li>\n<li><p>When use <a href="#visualMap-piecewise">visualMap-piecewise</a> and <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is not used.</p>\n</li>\n</ul>\n<p>About the value of visual channel (visual value):</p>\n<ul>\n<li><p>Basically <code class="codespan">Array</code> is used to express the range of visual value, e.g., <code class="codespan">color: [&#39;#333&#39;, &#39;#777&#39;]</code>.</p>\n</li>\n<li><p>Single <code class="codespan">number</code> or single <code class="codespan">string</code> can also be used, which will be converted to an <code class="codespan">Array</code> by visualMap component. e.g.:  <code class="codespan">opacity: 0.4</code> will be converted to <code class="codespan">opacity: [0.4, 0.4]</code>, <code class="codespan">color: &#39;#333&#39;</code> will be converted to <code class="codespan">color: [&#39;#333&#39;, &#39;#333&#39;]</code>.</p>\n</li>\n<li><p>For visual channel <code class="codespan">symbolSize</code>, <code class="codespan">opacity</code>, <code class="codespan">colorAlpha</code>, <code class="codespan">colorLightness</code>, <code class="codespan">colorSaturation</code>, <code class="codespan">colorHue</code>, the range of visual value is always in the form of: <code class="codespan">[visual value of visualMap.min, visual value of visualMap.max]</code>. For example, <code class="codespan">colorLightness: [0.8, 0.2]</code> means that the dataValue in series.data that equals to <code class="codespan">visualMap.min</code> (if any) will be mapped to lightness <code class="codespan">0.8</code>, and the dataValue that equals to <code class="codespan">visualMap.max</code> (if any) will be mapped to lightness <code class="codespan">0.2</code>, and other dataValues will be mapped by the linear calculateion based on the domain of <code class="codespan">[visualMap.min, visualMap.max]</code> and the range of <code class="codespan">[0.8, 0.2]</code>.</p>\n</li>\n<li><p>For visual channel <code class="codespan">color</code>, array is used, like: <code class="codespan">[&#39;#333&#39;, &#39;#78ab23&#39;, &#39;blue&#39;]</code>, which means a color ribbon is formed based on the three color stops, and dataValues will be mapped to the ribbon. Specifically, the dataValue that equals to <code class="codespan">visualMap.min</code> will be mapped onto <code class="codespan">&#39;#333&#39;</code>, the dataValue that equals to <code class="codespan">visualMap.max</code> will be mapped onto <code class="codespan">&#39;blue&#39;</code>, and other dataValues will be piecewisely interpolated to get the final color.</p>\n</li>\n<li><p>For visual channel <code class="codespan">symbol</code>, array is used, like: <code class="codespan">[&#39;circle&#39;, &#39;rect&#39;, &#39;diamond&#39;]</code>, where the dataValue that equals to <code class="codespan">visualMap.min</code> will be mapped onto <code class="codespan">&#39;circle&#39;</code>, the dataValue that equals to <code class="codespan">visualMap.max</code> will be mapped onto <code class="codespan">&#39;diamond&#39;</code>, and other dataValues will be caculated based on the numerical distance to <code class="codespan">visualMax.min</code> and to <code class="codespan">visualMap.max</code>, and mapped onto one of <code class="codespan">&#39;circle&#39;</code>, <code class="codespan">&#39;rect&#39;</code>, <code class="codespan">&#39;diamond&#39;</code>.</p>\n</li>\n</ul>\n<p>About the possible value range of visual value:</p>\n<ul>\n<li><p><code class="codespan">opacity</code>、<code class="codespan">colorAlpha</code>、<code class="codespan">colorLightness</code>、<code class="codespan">colorSaturation</code>、<code class="codespan">visual value</code></p>\n<p>  possible value range is <code class="codespan">[0, 1]</code>.</p>\n</li>\n<li><p><code class="codespan">colorHue</code>：</p>\n<p>  possible value range is <code class="codespan">[0, 360]</code>.</p>\n</li>\n<li><p><code class="codespan">color</code>：</p>\n<p>  color can use RGB expression, like <code class="codespan">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA expression, like <code class="codespan">&#39;rgba(128, 128, 128, 0.5)&#39;</code>, or Hex expression, like &#39;#ccc&#39;.</p>\n</li>\n<li><p><code class="codespan">symbol</code>：</p>\n</li>\n</ul>\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><br></p>\n<hr>\n<p><strong>✦ Table Mapping to visual channel ✦</strong></p>\n<p><code class="codespan">Table Mapping</code> could be used when dataValue (values in series.data, specified by <a href="#visualMap.dimension">visualMap.dimension</a>) is enumerable and we intend to map them to visual value by looking up a given table.</p>\n<p>For instance, in a <a href="#visualMap-piecewise">visualMap-piecewise</a> component, <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a> is set to <code class="codespan">[&#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. And there is series.data: <code class="codespan">[&#39;Demon Hunter&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;]</code>. Then we can establish the lookup rule for color: <code class="codespan">color: {&#39;Warden&#39;: &#39;red&#39;, &#39;Demon Hunter&#39;: &#39;black&#39;}</code>, by which the <code class="codespan">visualMap</code> component will map <code class="codespan">dataValue</code> to <code class="codespan">color</code>.</p>\n<p>How to configure <code class="codespan">visualMap</code> component to do <code class="codespan">Table Mapping</code>?</p>\n<p>When use <a href="#visualMap-piecewise">visualMap-piecewise</a> and <a href="#visualMap-piecewise.categories">visualMap-piecewise.categories</a>is set.</p>\n<p>About the value of visual channel (visual value):</p>\n<p>Generally <code class="codespan">Object</code> or <code class="codespan">Array</code> is used, for instance:</p>\n<pre><code class="lang-javascript">visualMap: {\n    type: &#39;piecewise&#39;,\n    // categories defines the items that to be displayed in visualMap-piecewise component.\n    categories: [\n        &#39;Demon Hunter&#39;, &#39;Blademaster&#39;, &#39;Death Knight&#39;, &#39;Warden&#39;, &#39;Paladin&#39;\n    ],\n    inRange: {\n        // visual value can be an Object：\n        color: {\n            &#39;Warden&#39;: &#39;red&#39;,\n            &#39;Demon Hunter&#39;: &#39;black&#39;,\n            &#39;&#39;: &#39;green&#39; // Blank string means that except &#39;Warden&#39; and &#39;Demon Hunter&#39;,\n                        // all other dataValues should be mapped to &#39;green&#39;.\n        }\n        // visual value can also be a single value,\n        // means that all dataValues should be mapped to the value.\n        color: &#39;green&#39;,\n        // visual value can also be a array, with the same length\n        // as the array of categories and one-one mapping onto it.\n        color: [&#39;red&#39;, &#39;black&#39;, &#39;green&#39;, &#39;yellow&#39;, &#39;white&#39;]\n    }\n}\n</code></pre>\n<p><a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/scatter-visualMap-categories&amp;edit=1&amp;reset=1" target="_blank">Example</a></p>\n<p><strong>✦ How to modity configurations of vsiual encoding? ✦</strong></p>\n<p>If you want to modify the configurations of visual encoding after chart been rendered (by invoke <code class="codespan">setOption</code> to set the initial <code class="codespan">option</code>), <code class="codespan">setOption</code> can be used again to modify configurations of visual encoding. For instance:</p>\n<pre><code class="lang-javascript">chart.setOption({\n    visualMap: {\n        inRange: {color: [&#39;red&#39;, &#39;blue&#39;]}\n    }\n});\n</code></pre>\n<p>Notice:</p>\n<ul>\n<li><p>These visualMap properties (i.e. <code class="codespan">inRange</code>, <code class="codespan">outOfRange</code>, <code class="codespan">target</code>, <code class="codespan">controller</code>) do not support &quot;merge&quot;, that is, anyone among them is modified when use <code class="codespan">setOption</code> again, all of the original values of them will not be kept but erased. The &quot;merge&quot; brings complication in implemnentation and understanding, whereas &quot;erase all&quot; normalize the practise: once you want to modify some visual values, you should pass all of them to <code class="codespan">setOption</code>, no matter they are to be changed.</p>\n</li>\n<li><p>This way, <code class="codespan">getOption() -&gt; modify the gotten option -&gt; setOption(modified option)</code>, is strongly <strong>not recommended</strong>, for instance:</p>\n</li>\n</ul>\n<pre><code class="lang-javascript">// Not recommended approach, regardless of its correctness:\n\nvar option = chart.getOption(); // Get the entire option.\noption.visualMap.inRange.color = [&#39;red&#39;, &#39;blue&#39;]; // modify color, which is what you want.\n\n// You have to modify those two properties, otherwise you will not get what you want.\noption.visualMap.target.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\noption.visualMap.controller.inRange.color = [&#39;red&#39;, &#39;blue&#39;];\n\nchart.setOption(option); // set the modified option back.\n// You should not use this approach, but use the\n// approach demostrated before this example.\n</code></pre>\n<p><strong>Notice:</strong> There is default color <code class="codespan">[&#39;#f6efa6&#39;, &#39;#d88273&#39;, &#39;#bf444c&#39;]</code> in <code class="codespan">inRange</code> if you not set <code class="codespan">inRange</code>. If you dont want it, set <code class="codespan">inRange: {color: null}</code> to disable it.</p>\n',
    )
    outOfRange: Optional[Any] = Field(
        None,
        description='<p>Define visual channels that will mapped from dataValues that are <strong>out of selected range</strong>. User can interact with visualMap component and make a seleced range by mouse or touch.</p>\n<p>See available configurations in <a href="#visualMap-piecewise.inRange">visualMap-piecewise.inRange</a></p>\n',
    )
    controller: Optional[Controller1] = Field(
        None,
        description='<p>Property <code class="codespan">inRange</code> and <code class="codespan">outOfRange</code> can be set within property <code class="codespan">controller</code>, which means those <code class="codespan">inRange</code> and <code class="codespan">outOfRange</code> are only used on the controller (<code class="codespan">visualMap</code> component itself), but are not used on chart (series). This property is useful in some scenarios when the view of controller needs to be customized in detail.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        4,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        0,
        description='<p>Distance between visualMap  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between visualMap  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between visualMap  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        0,
        description='<p>Distance between visualMap  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    orient: Optional[str] = Field(
        'vertical',
        description='<p>How to layout the visualMap component, <code class="codespan">&#39;horizontal&#39;</code> or <code class="codespan">&#39;vertical&#39;</code>.</p>\n',
    )
    padding: Optional[Union[float, Any]] = Field(
        5,
        description='\n\n<p>visualMap-piecewise space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples:</p>\n<pre><code class="lang-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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(0,0,0,0)', description='<p>background color of visualMap component.</p>\n'
    )
    borderColor: Optional[Any] = Field(
        '#ccc', description='<p>border color of visualMap component.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='<p>border width of visualMap component, with unit: px.</p>\n'
    )
    color: Optional[Any] = Field(
        "['#bf444c', '#d88273', '#f6efa6']",
        description='<p>This property remains only for compatibility with ECharts2, and is not recommended in ECharts3. It is recommended to configure color in <a href="#visualMap-piecewise.inRange">visualMap-piecewise.inRange</a>, or <a href="#visualMap-piecewise.outOfRange">visualMap-piecewise.outOfRange</a> if needed.</p>\n<p>If you persist in using it, the following issue should be noticed: the sequence of dataValues that are mapped to colorValues in property <code class="codespan">color</code> is from <code class="codespan">large</code> to <code class="codespan">small</code>, whereas that in <a href="#visualMap-piecewise.inRange">visualMap-piecewise.inRange</a> or <a href="#visualMap-piecewise.outOfRange">visualMap-piecewise.outOfRange</a> is from <code class="codespan">small</code> to <code class="codespan">large</code>.</p>\n',
    )
    textStyle: Optional[TextStyle10] = Field(None, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>the formatter tool for label.</p>\n<ul>\n<li><p>If it was set as a <code class="codespan">string</code>, it refers to a template, for instance: <code class="codespan">aaaa{value}bbbb{value2}</code>, where <code class="codespan">{value}</code> and <code class="codespan">{value2}</code> represents the current selected range of dataValues.</p>\n</li>\n<li><p>If it was set as a <code class="codespan">Function</code>, it refers to a callback function, for instance:</p>\n</li>\n</ul>\n<pre><code class="lang-javascript">formatter: function (value, value2) {\n    return &#39;aaaa&#39; + value + &#39;bbbb&#39; + value2;\n}\n</code></pre>\n',
    )


class VisualMap(DataZoom):
    """
        <p><code class="codespan">visualMap</code> is a type of component for visual encoding, which maps the data to visual channels, including:</p>
    <ul>
    <li><code class="codespan">symbol</code>: Type of symbol.</li>
    <li><code class="codespan">symbolSize</code>: Symbol size.</li>
    <li><code class="codespan">color</code>: Symbol color.</li>
    <li><code class="codespan">colorAlpha</code>: Symbol alpha channel.</li>
    <li><code class="codespan">opacity</code>: Opacity of symbol and others (like labels).</li>
    <li><code class="codespan">colorLightness</code>: Lightness in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>
    <li><code class="codespan">colorSaturation</code>: Saturation in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>
    <li><code class="codespan">colorHue</code>: Hue in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>
    </ul>
    <p>Myltiple <code class="codespan">visualMap</code> component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.</p>
    <p><code class="codespan">visualMap</code> could be defined as <a href="#visualMap-piecewise">Piecewise (visualMapPiecewise)</a> or <a href="#visualMap-continuous">Continuous (visualMapContinuous)</a>, which is distinguished by the property <code class="codespan">type</code>. For instance:</p>
    <pre><code class="lang-javascript">option = {
        visualMap: [
            { // the first visualMap component
                type: &#39;continuous&#39;, // defined to be continuous visualMap
                ...
            },
            { // the second visualMap component
                type: &#39;piecewise&#39;, // defined to be piecewise visualMap
                ...
            }
        ],
        ...
    };
    </code></pre>
    <p><br>
    <strong>✦ Configure mapping ✦</strong></p>
    <p>The dimension of <a href="#series.data">series.data</a> can be specified by <a href="#visualMap.dimension">visualMap.dimension</a>, from which the value can be retrieved and mapped onto visual channels, which can be defined in <a href="#visualMap.inRange">visualMap.inRange</a> and <a href="#visualMap.outOfRange">visualMap.outOfRange</a>.</p>
    <p><br>
    In series that controlled by visualMap, if a data item needs to escape from controlled by visualMap, you can set like this:</p>
    <pre><code>series: {
        type: &#39;...&#39;,
        data: [
            {name: &#39;Shanghai&#39;, value: 251},
            {name: &#39;Haikou&#39;, value: 21},
            // Mark as `visualMap: false`, then this item does not controlled by visualMap any more,
            // and series visual config (like color, symbol, ...) can be used to this item.
            {name: &#39;Beijing&#39;, value: 821, },
            ...
        ]
    }
    </code></pre><p><br>
    <strong>✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦</strong></p>
    <p><code class="codespan">visualMap</code> is renamed from the <code class="codespan">dataRange</code> of ECharts2, and the scope of functionalities are extended a lot. The configurations of <code class="codespan">dataRange</code> are still compatible in ECharts3, which automatically convert them to <code class="codespan">visualMap</code>. It is recommended to use <code class="codespan">visualMap</code> instead of <code class="codespan">dataRange</code> in ECharts3.</p>
    <p><br>
    <strong>✦ The detailed configurations of visualMap are elaborated as follows. ✦</strong></p>
    <p><br>
    <br></p>

    """

    pass


class Label6(Label):
    """
    <p>label of axisPointer</p>

    """

    pass


class LineStyle33(LineStyle2):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    pass


class ShadowStyle6(ShadowStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    pass


class CrossStyle2(CrossStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;cross&#39;</code>.</p>

    """

    pass


class AxisPointer6(BaseModel):
    """
        <p>Configuration item for axisPointer.</p>
    <p><code class="codespan">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href="#xAxis.axisPointer">xAxis.axisPointer</a> or <a href="#angleAxis.axisPointer">angleAxis.axisPointer</a>). More detailed features can be configured on <code class="codespan">someAxis.axisPointer</code>. But in common cases, using <code class="codespan">tooltip.axisPointer</code> is more convenient.</p>
    <blockquote>
    <p><strong>Notice:</strong> configurations of <code class="codespan">tooltip.axisPointer</code> has lower priority than that of <code class="codespan">someAxis.axisPointer</code>.</p>
    </blockquote>
    <hr>
    <p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>
    <p>For example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>


    <p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>
    <p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>


    <p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>

    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>



    <hr>
    <blockquote>
    <p><strong>Notice:</strong>
    Generally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>
    </blockquote>
    <blockquote>
    <p>But these configurations can only be configured in global axisPointer:
    <a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>
    </blockquote>
    <hr>
    <hr>
    <p><strong>How to display axisPointer:</strong></p>
    <p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>
    <p>Those axisPointer will not be displayed by default, utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to display the label of axisPointer:</strong></p>
    <p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to configure axisPointer on touch device:</strong></p>
    <p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>
    <p><strong>Notice:</strong>
    If tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>
    <p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>
    <hr>
    <p><strong>Snap to point</strong></p>
    <p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>
    <hr>

    """

    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class="codespan">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n',
    )
    axis: Optional[str] = Field(
        'auto',
        description='<p>The coordinate axis, which could be <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, or <code class="codespan">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label6] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle33] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle6] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    crossStyle: Optional[CrossStyle2] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;cross&#39;</code>.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        200,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'exponentialOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class TextStyle11(TextStyle2):
    """
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip2(BaseModel):
    """
        <p>Tooltip component.</p>
    <hr>
    <p><strong>General Introduction:</strong></p>
    <p>tooltip can be configured on different places:</p>
    <ul>
    <li><p>Configured on global: <a href="#tooltip">tooltip</a></p>
    </li>
    <li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>
    </li>
    <li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>
    </li>
    <li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>
    </li>
    </ul>




    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show the tooltip component.</p>\n<p>including tooltip floating layer and <a href="#tooltip.axisPointer">axisPointer</a>.</p>\n',
    )
    trigger: Optional[str] = Field(
        'item',
        description='\n\n<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class="codespan">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href="#grid">grid</a> or <a href="#polar">polar</a>. Also, you may assign axis with <a href="#tooltip.axisPointer.axis">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n',
    )
    axisPointer: Optional[AxisPointer6] = Field(
        None,
        description='<p>Configuration item for axisPointer.</p>\n<p><code class="codespan">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href="#xAxis.axisPointer">xAxis.axisPointer</a> or <a href="#angleAxis.axisPointer">angleAxis.axisPointer</a>). More detailed features can be configured on <code class="codespan">someAxis.axisPointer</code>. But in common cases, using <code class="codespan">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class="codespan">tooltip.axisPointer</code> has lower priority than that of <code class="codespan">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>\n\n\n<p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n',
    )
    showContent: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show the tooltip floating layer, whose default value is true. It should be configurated to be <code class="codespan">false</code>, if you only need tooltip to trigger the event or show the axisPointer without content.</p>\n',
    )
    alwaysShowContent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to show tooltip content all the time. By default, it will be hidden <a href="#tooltip.hideDelay">after some time</a>. It can be set to be <code class="codespan">true</code> to preserve displaying.</p>\n<p>This attribute is newly added to ECharts 3.0.</p>\n',
    )
    triggerOn: Optional[str] = Field(
        'mousemove|click',
        description='\n\n<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;mousemove&#39;</code></p>\n<p>  Trigger when mouse moves.</p>\n</li>\n<li><p><code class="codespan">&#39;click&#39;</code></p>\n<p>  Trigger when mouse clicks.</p>\n</li>\n<li><p><code class="codespan">&#39;mousemove|click&#39;</code></p>\n<p>  Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code></p>\n<p>  Do not triggered by <code class="codespan">&#39;mousemove&#39;</code> and <code class="codespan">&#39;click&#39;</code>. Tooltip can be triggered and hidden manually by calling <a href="api.html#action.tooltip.showTip" target="_blank">action.tooltip.showTip</a> and <a href="api.html#action.tooltip.hideTip" target="_blank">action.tooltip.hideTip</a>. It can also be triggered by <a href="#xAxis.axisPointer.handle">axisPointer.handle</a> in this case.</p>\n</li>\n</ul>\n<p>This attribute is new to ECharts 3.0.</p>\n',
    )
    showDelay: Optional[float] = Field(
        0,
        description='\n\n<p>Delay time for showing tooltip, in ms. No delay by default, and it is not recommended to set. Only valid when <a href="#tooltip.triggerOn">triggerOn</a> is set to be <code class="codespan">&#39;mousemove&#39;</code>.</p>\n',
    )
    hideDelay: Optional[float] = Field(
        100,
        description='\n\n<p>Delay time for hiding tooltip, in ms. It will be invalid when <a href="#tooltip.alwaysShowContent">alwaysShowContent</a> is <code class="codespan">true</code>.</p>\n',
    )
    enterable: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether mouse is allowed to enter the floating layer of tooltip, whose default value is false. If you need to interact in the tooltip like with links or buttons, it can be set as <code class="codespan">true</code>.</p>\n',
    )
    renderMode: Optional[str] = Field(
        'html',
        description='\n\n<p>Render mode for tooltip. By default, it is set to be <code class="codespan">&#39;html&#39;</code> so that extra DOM element is used for tooltip. It can also set to be <code class="codespan">&#39;richText&#39;</code> so that the tooltip will be rendered inside Canvas (SVG rich text is not implemented yet). This is very useful for environments that don&#39;t have DOM, such as Wechat applications.</p>\n',
    )
    confine: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether confine tooltip content in the view rect of chart instance.</p>\n<p>Useful when tooltip is cut because of <code class="codespan">&#39;overflow: hidden&#39;</code> set on outer dom of chart instance, or because of narrow screen on mobile.</p>\n',
    )
    appendToBody: Optional[bool] = Field(
        False,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v4.7.0</code></p>\n</blockquote>\n<p>Whether to append the tooltip DOM element as a child of the <code class="codespan">&lt;body&gt;</code> of the HTML page, when using <a href="#tooltip.renderMode">renderMode</a> <code class="codespan">&#39;html&#39;</code>.</p>\n<p>By default <code class="codespan">false</code>, means that the tooltip DOM element will be one of a descendant of its echarts DOM container. But that means that the tooltip might be cut when overflow the container if some of the ancestors DOM element of the echarts container are styled with <code class="codespan">overflow: hidden</code>. This case could also be resolved by setting <a href="#tooltip.confine">tooltip.confine</a>, but it might not suitable for all scenarios.</p>\n<p>Here we provide <code class="codespan">appendToBody: true</code> to auto append the tooltip element to <code class="codespan">&lt;body&gt;</code>, which is a common way to resolve this kind of issue. But <code class="codespan">true</code> is not set as a default value because to void to bring break change for some cases where tooltip is deeply customized and to void some unexpected bad cases.</p>\n<p>Note that it also works when CSS transform used.</p>\n',
    )
    className: Optional[str] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Specify the classes for the tooltip root DOM. (Only works in <a href="#tooltip.renderMode"><code class="codespan">html</code></a> render mode).</p>\n<p>Example:</p>\n<pre><code class="lang-ts">className: &#39;echarts-tooltip echarts-tooltip-dark&#39;\n</code></pre>\n',
    )
    transitionDuration: Optional[float] = Field(
        0.4,
        description='\n\n<p>The transition duration of tooltip&#39;s animation, in seconds. When it is set to be 0, it would move closely with the mouse.</p>\n',
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code 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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<p>The background color of tooltip&#39;s floating layer.</p>\n',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\n\n\n\n\n\n\n\n\n\n<p>The border color of tooltip&#39;s floating layer.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n\n\n\n\n\n\n\n\n<p>The border width of tooltip&#39;s floating layer.</p>\n',
    )
    padding: Optional[float] = Field(
        5,
        description='\n\n\n\n\n\n\n\n\n\n\n\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',
    )
    textStyle: Optional[TextStyle11] = Field(
        None, description='<p>The text syle of tooltip&#39;s floating layer.</p>\n'
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\n\n\n\n\n\n\n\n\n\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',
    )
    order: Optional[str] = Field(
        'seriesAsc',
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Tooltip order for multiple series. Defaults is <code class="codespan">&#39;seriesAsc&#39;</code>.</p>\n<p>Conditions to order tooltip. Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;seriesAsc&#39;</code></p>\n<p>  Base on series declaration, ascending order tooltip.</p>\n</li>\n<li><p><code class="codespan">&#39;seriesDesc&#39;</code></p>\n<p>  Base on series declaration, descending order tooltip.</p>\n</li>\n<li><p><code class="codespan">&#39;valueAsc&#39;</code></p>\n<p>  Base on value, ascending order tooltip, only for numberic value.</p>\n</li>\n<li><p><code class="codespan">&#39;valueDesc&#39;</code></p>\n<p>  Base on value, descending order tooltip, only for numberic value.</p>\n</li>\n</ul>\n',
    )


class Label7(Label):
    """
    <p>label of axisPointer</p>

    """

    pass


class LineStyle34(LineStyle2):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    pass


class ShadowStyle7(ShadowStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    pass


class Handle4(Handle):
    """
    <p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>

    """

    pass


class AxisPointer7(BaseModel):
    """
        <p>This is the global configurations of axisPointer.</p>
    <hr>
    <p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>
    <p>For example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>


    <p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>
    <p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>


    <p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>

    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>



    <hr>
    <blockquote>
    <p><strong>Notice:</strong>
    Generally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>
    </blockquote>
    <blockquote>
    <p>But these configurations can only be configured in global axisPointer:
    <a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>
    </blockquote>
    <hr>
    <hr>
    <p><strong>How to display axisPointer:</strong></p>
    <p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>
    <p>Those axisPointer will not be displayed by default, utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to display the label of axisPointer:</strong></p>
    <p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to configure axisPointer on touch device:</strong></p>
    <p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>
    <p><strong>Notice:</strong>
    If tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>
    <p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>
    <hr>
    <p><strong>Snap to point</strong></p>
    <p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>
    <hr>
    <hr>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    show: Optional[bool] = Field(
        False,
        description='\n\n<p>axisPointer will not be displayed by default. But if <a href="#tooltip.trigger">tooltip.trigger</a> is set as <code class="codespan">&#39;axis&#39;</code> or <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> is set as  <code class="codespan">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n',
    )
    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label7] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle34] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle7] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    triggerTooltip: Optional[bool] = Field(
        True, description='\n\n<p>Whether to trigger tooltip.</p>\n'
    )
    value: Optional[float] = Field(
        None,
        description='<p>current value. When using <a href="xAxisPointer.handle" target="_blank">axisPointer.handle</a>, <code class="codespan">value</code> can be set to define the initial position of axisPointer.</p>\n',
    )
    status: Optional[bool] = Field(
        None,
        description='\n\n<p>Current status, can be <code class="codespan">&#39;show&#39;</code> 和 <code class="codespan">&#39;hide&#39;</code>.</p>\n',
    )
    handle: Optional[Handle4] = Field(
        None,
        description='<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    link: Optional[Any] = Field(
        None,
        description='<p>axisPointers can be linked to each other. The term &quot;link&quot; represents that axes are synchronized and move together. Axes are linked according to the value of axisPointer.</p>\n<p>See <a href="http://localhost/echarts-website/examples/en/view.html?c=candlestick-brush&amp;edit=1&amp;reset=1" target="_blank">sampleA</a> and <a href="http://localhost/echarts-website/examples/en/view.html?c=scatter-nutrients-matrix&amp;edit=1&amp;reset=1" target="_blank">sampleB</a>.</p>\n<p>link is an array, where each item represents a &quot;link group&quot;. Axes will be linked when they are refered in the same link group. For example:</p>\n<pre><code class="lang-ts">link: [\n    {\n        // All axes with xAxisIndex 0, 3, 4 and yAxisName &#39;sameName&#39; will be linked.\n        xAxisIndex: [0, 3, 4],\n        yAxisName: &#39;someName&#39;\n    },\n    {\n        // All axes with xAxisId &#39;aa&#39;, &#39;cc&#39; and all angleAxis will be linked.\n        xAxisId: [&#39;aa&#39;, &#39;cc&#39;],\n        angleAxis: &#39;all&#39;\n    },\n    ...\n]\n</code></pre>\n<p>As illustrated above, axes can be refered in these approaches in a link group:</p>\n<pre><code class="lang-ts">{\n    // &#39;some&#39; represent the dimension name of a axis, namely, &#39;x&#39;, &#39;y&#39;, &#39;radius&#39;, &#39;angle&#39;, &#39;single&#39;\n    someAxisIndex: [...], // can be an array or a value or &#39;all&#39;\n    someAxisName: [...],  // can be an array or a value or &#39;all&#39;\n    someAxisId: [...],    // can be an array or a value or &#39;all&#39;\n}\n</code></pre>\n<hr>\n<hr>\n<p><strong>How to link axes with different <a href="#xAxis.type">axis.type</a>?</strong></p>\n<p>For example, the type of axisA is &#39;category&#39;, and the type of axisB type is &#39;time&#39;, we can write conversion function (mapper) in link group to convert values from an axis to another axis. For example:</p>\n<pre><code class="lang-ts">link: [{\n    xAxisIndex: [0, 1],\n    yAxisName: [&#39;yy&#39;],\n    mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n        if (sourceAxisInfo.axisName === &#39;yy&#39;) {\n            // from timestamp to &#39;2012-02-05&#39;\n            return echarts.format.formatTime(&#39;yyyy-MM-dd&#39;, sourceVal);\n        }\n        else if (targetAxisInfo.axisName === &#39;yy&#39;) {\n            // from &#39;2012-02-05&#39; to date\n            return echarts.number.parseDate(dates[sourceVal]);\n        }\n        else {\n            return sourceVal;\n        }\n    }\n}]\n</code></pre>\n<p>Input parameters of mapper:</p>\n<p><code class="codespan">{number}</code> sourceVal</p>\n<p><code class="codespan">{Object}</code> sourceAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}</p>\n<p><code class="codespan">{Object}</code> targetAxisInfo Including {axisDim, axisId, axisName, axisIndex, ...}</p>\n<p>Return of mapper:</p>\n<p><code class="codespan">{number}</code> The result of conversion.</p>\n',
    )
    triggerOn: Optional[str] = Field(
        'mousemove|click',
        description='\n\n<p>Conditions to trigger tooltip. Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;mousemove&#39;</code></p>\n<p>  Trigger when mouse moves.</p>\n</li>\n<li><p><code class="codespan">&#39;click&#39;</code></p>\n<p>  Trigger when mouse clicks.</p>\n</li>\n<li><p><code class="codespan">&#39;mousemove|click&#39;</code></p>\n<p>  Trigger when mouse clicks and moves.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code></p>\n<p>  Do not triggered by <code class="codespan">&#39;mousemove&#39;</code> and <code class="codespan">&#39;click&#39;</code></p>\n</li>\n</ul>\n',
    )


class IconStyle(BaseModel):
    """
    <p>The style setting of save as image icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>

    """

    color: Optional[Any] = Field(
        'none',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#666',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class IconStyle1(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    textPosition: Optional[str] = Field(
        'bottom',
        description='<p>Text position: <code class="codespan">&#39;left&#39;</code> / <code class="codespan">&#39;right&#39;</code> / <code class="codespan">&#39;top&#39;</code> / <code class="codespan">&#39;bottom&#39;</code>.</p>\n',
    )
    textFill: Optional[str] = Field(
        '#000',
        description='\n\n<p>Fill color of text. If it&#39;s not set, it will use in the order of icon&#39;s fill color, stroke color, and <code class="codespan">&#39;#000&#39;</code>.</p>\n',
    )
    textAlign: Optional[str] = Field(
        'center',
        description='\n\n<p>Text align: <code class="codespan">&#39;left&#39;</code> / <code class="codespan">&#39;center&#39;</code> / <code class="codespan">&#39;right&#39;</code>.</p>\n',
    )
    textBackgroundColor: Optional[str] = Field(
        None, description='\n\n<p>Text background color.</p>\n'
    )
    textBorderRadius: Optional[float] = Field(
        None, description='\n\n<p>Border radius of text area.</p>\n'
    )
    textPadding: Optional[float] = Field(
        None, description='\n\n<p>Padding of text area.</p>\n'
    )


class Emphasis2(BaseModel):
    iconStyle: Optional[IconStyle1] = Field(None, description='')


class SaveAsImage(BaseModel):
    """
    <p>Save as image.</p>

    """

    type: Optional[str] = Field(
        'png',
        description='\n\n<p>File suffix of the image saved.</p>\n<ul>\n<li>If the <code class="codespan">renderer</code> is set to be <code class="codespan">&#39;canvas&#39;</code> when chart <a href="api.html#echarts.init" target="_blank">initialized</a> (default), then <code class="codespan">&#39;png&#39;</code> (default) and <code class="codespan">&#39;jpg&#39;</code> are supported.</li>\n<li>If the <code class="codespan">renderer</code> is set to be <code class="codespan">&#39;svg&#39;</code> when when chart <a href="api.html#echarts.init" target="_blank">initialized</a>, then only <code class="codespan">&#39;svg&#39;</code> is supported for <code class="codespan">type</code> (<code class="codespan">&#39;svg&#39;</code> type is supported since <code class="codespan">v4.8.0</code>).</li>\n</ul>\n',
    )
    name: Optional[str] = Field(
        None,
        description='\n\n<p>Name to save the image, whose default value is <a href="#title.text">title.text</a>.</p>\n',
    )
    backgroundColor: Optional[Any] = Field(
        'auto',
        description='\n\n<p>Background color to save the image, whose default value is <a href="#backgroundColor">backgroundColor</a>. If <code class="codespan">backgroundColor</code> is not set, white color is used.</p>\n',
    )
    connectedBackgroundColor: Optional[Any] = Field(
        '#fff',
        description='\n\n<p>When <a href="api.html#echarts.connect" target="_blank">echarts.connect</a> is used to connect the interaction of multiple chart series, they will all be included in the exported image. This option sets the background color between these charts.</p>\n',
    )
    excludeComponents: Optional[Any] = Field(
        "['toolbox']",
        description='<p>Components to be excluded when export. By default, toolbox is excluded.</p>\n',
    )
    show: Optional[bool] = Field(True, description='<p>Whether to show the tool.</p>\n')
    title: Optional[str] = Field('save as image', description='')
    icon: Optional[Any] = Field(
        None,
        description='<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>',
    )
    iconStyle: Optional[IconStyle] = Field(
        None,
        description='<p>The style setting of save as image icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>\n',
    )
    emphasis: Optional[Emphasis2] = Field(None, description='')
    pixelRatio: Optional[float] = Field(
        1,
        description='\n\n<p>Resolution ratio to save image, whose default value is that of the container. Values larger than 1 (e.g.: 2) is supported when you need higher resolution.</p>\n',
    )


class IconStyle2(IconStyle):
    """
    <p>The style setting of restore icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>

    """

    pass


class IconStyle3(IconStyle1):
    pass


class Emphasis3(BaseModel):
    iconStyle: Optional[IconStyle3] = Field(None, description='')


class Restore(BaseModel):
    """
    <p>Restore configuration item.</p>

    """

    show: Optional[bool] = Field(True, description='<p>Whether to show the tool.</p>\n')
    title: Optional[str] = Field('restore', description='')
    icon: Optional[Any] = Field(
        None,
        description='<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>',
    )
    iconStyle: Optional[IconStyle2] = Field(
        None,
        description='<p>The style setting of restore icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>\n',
    )
    emphasis: Optional[Emphasis3] = Field(None, description='')


class IconStyle4(IconStyle):
    """
    <p>The style setting of data view icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>

    """

    pass


class IconStyle5(IconStyle1):
    pass


class Emphasis4(BaseModel):
    iconStyle: Optional[IconStyle5] = Field(None, description='')


class DataView(BaseModel):
    """
    <p>Data view tool, which could display data in current chart and updates chart after being edited.</p>

    """

    show: Optional[bool] = Field(True, description='<p>Whether to show the tool.</p>\n')
    title: Optional[str] = Field('data view', description='')
    icon: Optional[Any] = Field(
        None,
        description='<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>',
    )
    iconStyle: Optional[IconStyle4] = Field(
        None,
        description='<p>The style setting of data view icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>\n',
    )
    emphasis: Optional[Emphasis4] = Field(None, description='')
    readOnly: Optional[bool] = Field(
        False, description='\n\n<p>Whether it is read-only.</p>\n'
    )
    optionToContent: Optional[Any] = Field(
        None,
        description='<pre><code class="lang-ts">(option:Object) =&gt; HTMLDomElement|string\n</code></pre>\n<p>Define a function to present dataView. It is used to replace default textarea for richer data editing. It can return a DOM object, or an HTML string.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">optionToContent: function(opt) {\n    var axisData = opt.xAxis[0].data;\n    var series = opt.series;\n    var table = &#39;&lt;table style=&quot;width:100%;text-align:center&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&#39;\n                 + &#39;&lt;td&gt;Time:&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[0].name + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[1].name + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;/tr&gt;&#39;;\n    for (var i = 0, l = axisData.length; i &lt; l; i++) {\n        table += &#39;&lt;tr&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + axisData[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[0].data[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;td&gt;&#39; + series[1].data[i] + &#39;&lt;/td&gt;&#39;\n                 + &#39;&lt;/tr&gt;&#39;;\n    }\n    table += &#39;&lt;/tbody&gt;&lt;/table&gt;&#39;;\n    return table;\n}\n</code></pre>\n',
    )
    contentToOption: Optional[Any] = Field(
        None,
        description='<pre><code class="lang-ts">(container:HTMLDomElement, option:Object) =&gt; Object\n</code></pre>\n<p>When optionToContent is used, if you want to support refreshing chart after data changes, you need to implement the logic to merge options in this function.</p>\n',
    )
    lang: Optional[Any] = Field(
        "['data view', 'turn off', 'refresh']",
        description='<p>There are 3 names in data view, which are <code class="codespan">[&#39;data view&#39;, &#39;turn off&#39; and &#39;refresh&#39;]</code>.</p>\n',
    )
    backgroundColor: Optional[str] = Field(
        '#fff',
        description='\n\n<p>Background color of the floating layer in data view.</p>\n',
    )
    textareaColor: Optional[str] = Field(
        '#fff',
        description='\n\n<p>Background color of input area of the floating layer in data view.</p>\n',
    )
    textareaBorderColor: Optional[str] = Field(
        '#333',
        description='\n\n<p>Border color of input area of the floating layer in data view.</p>\n',
    )
    textColor: Optional[str] = Field('#000', description='\n\n<p>Text color.</p>\n')
    buttonColor: Optional[str] = Field(
        '#c23531', description='\n\n<p>Button color.</p>\n'
    )
    buttonTextColor: Optional[str] = Field(
        '#fff', description='\n\n<p>Color of button text.</p>\n'
    )


class Title1(BaseModel):
    """
    <p>Restored and zoomed title text.</p>

    """

    zoom: Optional[str] = Field('area zooming', description='')
    back: Optional[str] = Field('restore area zooming', description='')


class Icon(BaseModel):
    """
    <p>Zooming and restore icon path.</p>

    """

    zoom: Optional[str] = Field(
        None,
        description='<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>',
    )
    back: Optional[str] = Field(
        None,
        description='<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>',
    )


class IconStyle6(IconStyle):
    """
    <p>The style setting of data area zooming icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>

    """

    pass


class IconStyle7(IconStyle1):
    pass


class Emphasis5(BaseModel):
    iconStyle: Optional[IconStyle7] = Field(None, description='')


class BrushStyle1(HandleStyle1):
    """
    <p>Style of brush rectangle.</p>

    """

    pass


class DataZoom1(BaseModel):
    """
    <p>Data area zooming, which only supports rectangular coordinate by now.</p>

    """

    show: Optional[bool] = Field(True, description='<p>Whether to show the tool.</p>\n')
    title: Optional[Title1] = Field(
        None, description='<p>Restored and zoomed title text.</p>\n'
    )
    icon: Optional[Icon] = Field(
        None, description='<p>Zooming and restore icon path.</p>\n'
    )
    iconStyle: Optional[IconStyle6] = Field(
        None,
        description='<p>The style setting of data area zooming icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>\n',
    )
    emphasis: Optional[Emphasis5] = Field(None, description='')
    filterMode: Optional[str] = Field(
        'filter',
        description='<p>The same meaning as <a href="#dataZoom.filterMode">dataZoom.filterMode</a>.</p>\n',
    )
    xAxisIndex: Optional[Union[float, Any, bool]] = Field(
        None,
        description='<p>Defines which <a href="#xAxis">xAxis</a> should be controlled. By default, it controls all x axes. If it is set to be <code class="codespan">false</code>, then no x axis is controlled. If it is set to be then it controls axis with axisIndex of <code class="codespan">3</code>. If it is set to be <code class="codespan">[0, 3]</code>, it controls the x-axes with axisIndex of <code class="codespan">0</code> and <code class="codespan">3</code>.</p>\n',
    )
    yAxisIndex: Optional[Union[float, Any, bool]] = Field(
        None,
        description='<p>Defines which <a href="#yAxis">yAxis</a> should be controlled. By default, it controls all y axes. If it is set to be <code class="codespan">false</code>, then no y axis is controlled. If it is set to be then it controls axis with axisIndex of <code class="codespan">3</code>. If it is set to be <code class="codespan">[0, 3]</code>, it controls the x-axes with axisIndex of <code class="codespan">0</code> and <code class="codespan">3</code>.</p>\n',
    )
    brushStyle: Optional[BrushStyle1] = Field(
        None, description='<p>Style of brush rectangle.</p>\n'
    )


class Title2(BaseModel):
    """
    <p>Title for different types, can be configured seperately.</p>

    """

    line: Optional[str] = Field('Switch to Line Chart', description='')
    bar: Optional[str] = Field('Switch to Bar Chart', description='')
    stack: Optional[str] = Field('Stack', description='')
    tiled: Optional[str] = Field('Tile', description='')


class Icon1(BaseModel):
    """
    <p>the different types of icon path , which could be configurated individually.</p>

    """

    line: Optional[str] = Field(
        None,
        description='<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>',
    )
    bar: Optional[str] = Field(
        None,
        description='<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>',
    )
    stack: Optional[str] = Field(
        None,
        description='<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>',
    )


class IconStyle8(IconStyle):
    """
    <p>The style setting of magic type switching icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>

    """

    pass


class IconStyle9(IconStyle1):
    pass


class Emphasis6(BaseModel):
    iconStyle: Optional[IconStyle9] = Field(None, description='')


class Option(BaseModel):
    """
    <p>Configuration item for each type, which will be used when switching to certain type.</p>

    """

    line: Optional[Any] = Field(None, description='')
    bar: Optional[Any] = Field(None, description='')
    stack: Optional[Any] = Field(None, description='')


class SeriesIndex(BaseModel):
    """
    <p>Series list for each type.</p>

    """

    line: Optional[Any] = Field(None, description='')
    bar: Optional[Any] = Field(None, description='')


class MagicType(BaseModel):
    """
        <p>Magic type switching.
    <strong>示例: </strong></p>
    <pre><code class="lang-ts">feature: {
        magicType: {
            type: [&#39;line&#39;, &#39;bar&#39;, &#39;stack&#39;]
        }
    }
    </code></pre>

    """

    show: Optional[bool] = Field(True, description='<p>Whether to show the tool.</p>\n')
    type: Optional[Any] = Field(
        None,
        description='<p>Enabled magic types, including <code class="codespan">&#39;line&#39;</code> (for line charts), <code class="codespan">&#39;bar&#39;</code> (for bar charts), <code class="codespan">&#39;stack&#39;</code> (for stacked charts).</p>\n',
    )
    title: Optional[Title2] = Field(
        None,
        description='<p>Title for different types, can be configured seperately.</p>\n',
    )
    icon: Optional[Icon1] = Field(
        None,
        description='<p>the different types of icon path , which could be configurated individually.</p>\n',
    )
    iconStyle: Optional[IconStyle8] = Field(
        None,
        description='<p>The style setting of magic type switching icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>\n',
    )
    emphasis: Optional[Emphasis6] = Field(None, description='')
    option: Optional[Option] = Field(
        None,
        description='<p>Configuration item for each type, which will be used when switching to certain type.</p>\n',
    )
    seriesIndex: Optional[SeriesIndex] = Field(
        None, description='<p>Series list for each type.</p>\n'
    )


class Icon2(BaseModel):
    """
    <p>Icon path for each icon.</p>

    """

    rect: Optional[str] = Field(
        None,
        description='<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>',
    )
    polygon: Optional[str] = Field(
        None,
        description='<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>',
    )
    lineX: Optional[str] = Field(
        None,
        description='<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>',
    )
    lineY: Optional[str] = Field(
        None,
        description='<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>',
    )
    keep: Optional[str] = Field(
        None,
        description='<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>',
    )
    clear: Optional[str] = Field(
        None,
        description='<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>',
    )


class Title3(BaseModel):
    """
    <p>Title.</p>

    """

    rect: Optional[str] = Field('Rectangle selection', description='')
    polygon: Optional[str] = Field('Polygon selection', description='')
    lineX: Optional[str] = Field('Horizontal selection', description='')
    lineY: Optional[str] = Field('Vertical selection', description='')
    keep: Optional[str] = Field('Keep previous selection', description='')
    clear: Optional[str] = Field('Clear selection', description='')


class Brush(BaseModel):
    """
        <p>Brush-selecting icon.</p>
    <p>It can also be configured at <a href="#brush.toolbox">brush.toolbox</a>.</p>

    """

    type: Optional[Any] = Field(
        None,
        description='<p>Icons used, whose values are:</p>\n<ul>\n<li><code class="codespan">&#39;rect&#39;</code>: Enabling selecting with rectangle area.</li>\n<li><code class="codespan">&#39;polygon&#39;</code>: Enabling selecting with any shape.</li>\n<li><code class="codespan">&#39;lineX&#39;</code>: Enabling horizontal selecting.</li>\n<li><code class="codespan">&#39;lineY&#39;</code>: Enabling vertical selecting.</li>\n<li><code class="codespan">&#39;keep&#39;</code>: Switching between <em>single selecting</em> and <em>multiple selecting</em>. The latter one can select multiple areas, while the former one cancels previous selection.</li>\n<li><code class="codespan">&#39;clear&#39;</code>: Clearing all selection.</li>\n</ul>\n',
    )
    icon: Optional[Icon2] = Field(None, description='<p>Icon path for each icon.</p>\n')
    title: Optional[Title3] = Field(None, description='<p>Title.</p>\n')


class Feature(BaseModel):
    """
        <p>The configuration item for each tool.</p>
    <p>Besides the tools we provide, user-defined toolbox is also supported.</p>
    <p>Notes: User-defined tool name could only start with <code class="codespan">my</code>, like <code class="codespan">myTool1</code> and <code class="codespan">myTool2</code> in the below example:</p>
    <pre><code class="lang-javascript">{
        toolbox: {
            feature: {
                myTool1: {
                    show: true,
                    title: &#39;custom extension method 1&#39;,
                    icon: &#39;path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891&#39;,
                    onclick: function (){
                        alert(&#39;myToolHandler1&#39;)
                    }
                },
                myTool2: {
                    show: true,
                    title: &#39;custom extension method&#39;,
                    icon: &#39;image://https://echarts.apache.org/en/images/favicon.png&#39;,
                    onclick: function (){
                        alert(&#39;myToolHandler2&#39;)
                    }
                }
            }
        }
    }
    </code></pre>

    """

    saveAsImage: Optional[SaveAsImage] = Field(
        None, description='<p>Save as image.</p>\n'
    )
    restore: Optional[Restore] = Field(
        None, description='<p>Restore configuration item.</p>\n'
    )
    dataView: Optional[DataView] = Field(
        None,
        description='<p>Data view tool, which could display data in current chart and updates chart after being edited.</p>\n',
    )
    dataZoom: Optional[DataZoom1] = Field(
        None,
        description='<p>Data area zooming, which only supports rectangular coordinate by now.</p>\n',
    )
    magicType: Optional[MagicType] = Field(
        None,
        description='<p>Magic type switching.\n<strong>示例: </strong></p>\n<pre><code class="lang-ts">feature: {\n    magicType: {\n        type: [&#39;line&#39;, &#39;bar&#39;, &#39;stack&#39;]\n    }\n}\n</code></pre>\n',
    )
    brush: Optional[Brush] = Field(
        None,
        description='<p>Brush-selecting icon.</p>\n<p>It can also be configured at <a href="#brush.toolbox">brush.toolbox</a>.</p>\n',
    )


class IconStyle10(IconStyle):
    """
    <p>The style setting of Shared icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>

    """

    pass


class IconStyle11(IconStyle1):
    pass


class Emphasis7(BaseModel):
    iconStyle: Optional[IconStyle11] = Field(None, description='')


class Toolbox(BaseModel):
    """
        <p>A group of utility tools, which includes <a href="#toolbox.feature.saveAsImage">export</a>, <a href="#toolbox.feature.dataView">data view</a>, <a href="#toolbox.feature.magicType">dynamic type switching</a>, <a href="#toolbox.feature.dataZoom">data area zooming</a>, and <a href="#toolbox.feature.reset">reset</a>.</p>
    <p><strong>Example: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-marker&reset=1&edit=1" width="600" height="400"></iframe>




    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show toolbox component.</p>\n'
    )
    orient: Optional[str] = Field(
        'horizontal',
        description='\n\n<p>The layout orientation of toolbox&#39;s icon.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n',
    )
    itemSize: Optional[float] = Field(
        15, description='\n\n<p>The size of toolbox&#39;s icon.</p>\n'
    )
    itemGap: Optional[float] = Field(
        8,
        description='\n\n<p>The gap between each icon of toolbox. It is horizontal gap in horizontal layout, while vertical gap in vertical layout.</p>\n',
    )
    showTitle: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show the title of each tool icon when mouse hovers.</p>\n',
    )
    feature: Optional[Feature] = Field(
        None,
        description='<p>The configuration item for each tool.</p>\n<p>Besides the tools we provide, user-defined toolbox is also supported.</p>\n<p>Notes: User-defined tool name could only start with <code class="codespan">my</code>, like <code class="codespan">myTool1</code> and <code class="codespan">myTool2</code> in the below example:</p>\n<pre><code class="lang-javascript">{\n    toolbox: {\n        feature: {\n            myTool1: {\n                show: true,\n                title: &#39;custom extension method 1&#39;,\n                icon: &#39;path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891&#39;,\n                onclick: function (){\n                    alert(&#39;myToolHandler1&#39;)\n                }\n            },\n            myTool2: {\n                show: true,\n                title: &#39;custom extension method&#39;,\n                icon: &#39;image://https://echarts.apache.org/en/images/favicon.png&#39;,\n                onclick: function (){\n                    alert(&#39;myToolHandler2&#39;)\n                }\n            }\n        }\n    }\n}\n</code></pre>\n',
    )
    iconStyle: Optional[IconStyle10] = Field(
        None,
        description='<p>The style setting of Shared icon. Since icon label is displayed only when hovering on the icon, the label configuration options are available under <code class="codespan">emphasis</code>.</p>\n',
    )
    emphasis: Optional[Emphasis7] = Field(None, description='')
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between toolbox component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between toolbox component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between toolbox component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between toolbox component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        'auto', description='<p>Width of toolbox component. Adaptive by default.</p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        'auto', description='<p>Height of toolbox component. Adaptive by default.</p>\n'
    )
    tooltip: Optional[Any] = Field(
        None,
        description='<p>Tooltip configuration for toolbox tooltip, which is similar to <a href="#tooltip">tooltip</a>. It is not shown by default. If you wish to set special style for toolbox icon label (especially when using CSS to control text style), you may set as the following example:</p>\n<pre><code class="lang-ts">option = {\n    tooltip: {\n        show: true // include tooltip component for the feature\n    },\n    toolbox: {\n        show: true,\n        showTitle: false, // hide the default text so they don&#39;t overlap each other\n        feature: {\n            saveAsImage: {\n                show: true,\n                title: &#39;Save As Image&#39;\n            },\n            dataView: {\n                show: true,\n                title: &#39;Data View&#39;\n            },\n        },\n        tooltip: { // same as option.tooltip\n            show: true,\n            formatter: function (param) {\n                return return &#39;&lt;div&gt;&#39; + param.title + &#39;&lt;/div&gt;&#39;; // user-defined DOM structure\n            },\n            backgroundColor: &#39;#222&#39;,\n            textStyle: {\n                fontSize: 12,\n            },\n            extraCssText: &#39;box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);&#39; // user-defined CSS styles\n        }\n    },\n    ...\n}\n</code></pre>\n',
    )


class Brush1(BaseModel):
    """
        <p><code class="codespan">brush</code> is an area-selecting component, with which user can select part of data from a chart to display in detail, or do calculations with them.</p>
    <p><br></p>
    <hr>
    <p><strong>Brush type and triggering button</strong></p>
    <p>Currently, supported <code class="codespan">brush</code> types include: <code class="codespan">scatter</code>, <code class="codespan">bar</code>, <code class="codespan">candlestick</code>. (Note that <code class="codespan">parallel</code> contains brush function by itself, which is not provided by brush component.)</p>
    <p>Click the button in <code class="codespan">toolbox</code> to enable operations like <em>area selecting</em>, or <em>canceling selecting</em>.</p>
    <p><br>
    Example of <code class="codespan">horizontal brush</code>: (Click the button in <code class="codespan">toolbox</code> to enable brushing.)</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=candlestick-brush&edit=1&reset=1" width="800" height="500"></iframe>


    <p><br>
    Example of <code class="codespan">brush</code> in <code class="codespan">bar</code> charts:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=bar-brush&edit=1&reset=1" width="800" height="400"></iframe>



    <p>Button for <code class="codespan">brush</code> can be assigned in <a href="#toolbox.feature.brush.type"><code class="codespan">toolbox</code></a> or <a href="#brush.toolbox"><code class="codespan">brush</code> configuration</a>.</p>
    <p>The following types of brushes are supported: <code class="codespan">rect</code>, <code class="codespan">polygon</code>, <code class="codespan">lineX</code>, <code class="codespan">lineY</code>. See <a href="#brush.toolbox">brush.toolbox</a> for more information.</p>
    <p><code class="codespan">keep</code> button can be used to toggle a single or multiple selections.</p>
    <ul>
    <li>Only one select box is available in single selection mode, and the select-box can be removed by clicking on the blank area.</li>
    <li>Multiple select boxes are available in multiple selection mode, and the select-boxes cannot be removed by click on the blank area. Instead, you need to click the <em>clear</em> button.</li>
    </ul>
    <p><br></p>
    <hr>
    <p><strong>Relationship between brush-selecting and coordinates</strong></p>
    <p><code class="codespan">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>
    <p><strong>Global brushes</strong></p>
    <p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>
    <p><strong>Coordinate brushes</strong></p>
    <p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class="codespan">roam</code> and <code class="codespan">dataZoom</code>).</p>
    <p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class="codespan">geo</code> charts.</p>
    <p>By assigning <a href="#brush.geoIndex">brush.geoIndex</a>, or <a href="#brush.xAxisIndex">brush.xAxisIndex</a>, or <a href="#brush.yAxisIndex">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>
    <ul>
    <li><code class="codespan">&#39;all&#39;</code>: for all axes;</li>
    <li><code class="codespan">number</code>: like <code class="codespan">0</code>, for a particular coordinate with that index;</li>
    <li><code class="codespan">Array</code>: like <code class="codespan">[0, 4, 2]</code>, for coordinates with those indexes;</li>
    <li><code class="codespan">&#39;none&#39;</code>, or <code class="codespan">null</code>, or <code class="codespan">undefined</code>: for not assigning.</li>
    </ul>
    <p>Example:</p>
    <pre><code class="lang-javascript">option = {
        geo: {
            ...
        },
        brush: {
            geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above
            ...
        }
    };
    </code></pre>
    <p>Example:</p>
    <pre><code class="lang-javascript">option = {
        grid: [
            {...}, // grid 0
            {...}  // grid 1
        ],
        xAxis: [
            {gridIndex: 1, ...}, // xAxis 0 for grid 1
            {gridIndex: 0, ...}  // xAxis 1 for grid 0
        ],
        yAxis: [
            {gridIndex: 1, ...}, // yAxis 0 for grid 1
            {gridIndex: 0, ...}  // yAxis 1 for grid 0
        ],
        brush: {
            xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`
            ...
        }
    };
    </code></pre>
    <p><br></p>
    <hr>
    <p><strong>Control select-box with API</strong></p>
    <p><code class="codespan">dispatchAction</code> can be used to render select-box programatically. For example:</p>
    <pre><code class="lang-javascript">myChart.dispatchAction({
        type: &#39;brush&#39;,
        areas: [
            {
                geoIndex: 0,
                // Assign select-box type
                brushType: &#39;polygon&#39;,
                // Assign select-box shape
                coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]
            }
        ]
    });
    </code></pre>
    <p>Please refer to <a href="api.html#action.brush" target="_blank">action.brush</a> for more information.</p>
    <p><br></p>
    <hr>
    <p><strong>brushLink</strong></p>
    <p>Links interaction between selected items in different series.</p>
    <p>Following is an example of enabling selected effect for <code class="codespan">scatter</code> and <code class="codespan">parallel</code> charts once a scatter chart is selected.</p>
    <p><code class="codespan">brushLink</code> is an array of <code class="codespan">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>
    <ul>
    <li><code class="codespan">[3, 4, 5]</code> for interacting series with seriesIndex as <code class="codespan">3</code>, <code class="codespan">4</code>, or <code class="codespan">5</code>;</li>
    <li><code class="codespan">&#39;all&#39;</code> for interacting all series;</li>
    <li><code class="codespan">&#39;none&#39;</code>, or <code class="codespan">null</code>, or <code class="codespan">undefined</code> for disabling <code class="codespan">brushLink</code>.</li>
    </ul>
    <p><strong>Attention</strong></p>
    <p><code class="codespan">brushLink</code> is a mapping of <code class="codespan">dataIndex</code>. So <strong><code class="codespan">data</code> of every series with <code class="codespan">brushLink</code> should be guaranteed to correspond to the other</strong>.</p>
    <p>Example:</p>
    <pre><code class="lang-javascript">option = {
        brush: {
            brushLink: [0, 1]
        },
        series: [
            {
                type: &#39;bar&#39;
                data: [232,    4434,    545,      654]     // data has 4 items
            },
            {
                type: &#39;parallel&#39;,
                data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above
            }
        ]
    };
    </code></pre>
    <p>Please refer to <a href="#brush.brushLink">brush.brushLink</a>.</p>
    <p><br></p>
    <hr>
    <p><strong>throttle / debounce</strong></p>
    <p>By default, <code class="codespan">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>
    <p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href="#brush.throttleType">brush.throttleType</a> and <a href="#brush.throttleDelay">brush.throttleDelay</a> to solve this problem.</p>
    <p>Valid <code class="codespan">throttleType</code> values can be:</p>
    <ul>
    <li><code class="codespan">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href="#brush.throttleDelay">brush.throttleDelay</a>;</li>
    <li><code class="codespan">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href="#brush.throttleDelay">brush.throttleDelay</a>.</li>
    </ul>
    <p>In this <a href="http://localhost/echarts-website/examples/en/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1" target="_blank">example</a>, <code class="codespan">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>
    <p><br></p>
    <hr>
    <p><strong>Visual configurations of selected and unselected items</strong></p>
    <p>Refer to <a href="#brush.inBrush">brush.inBrush</a> and <a href="#brush.outOfBrush">brush.outOfBrush</a>.</p>
    <p><br></p>
    <hr>
    <p>Here is the configuration in detail.</p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    toolbox: Optional[Any] = Field(
        "['rect', 'polygon', 'keep', 'clear']",
        description='<p>Use the buttons in toolbox.</p>\n<p>Buttons in toolbox that is related to brush includes:</p>\n<ul>\n<li><code class="codespan">&#39;rect&#39;</code>: for selection-box in rectangle shape;</li>\n<li><code class="codespan">&#39;polygon&#39;</code>: for selection-box in polygon shape;</li>\n<li><code class="codespan">&#39;lineX&#39;</code>: for horizontal selection-box;</li>\n<li><code class="codespan">&#39;lineY&#39;</code>: for vertical selection-box;</li>\n<li><code class="codespan">&#39;keep&#39;</code>: for setting mode between <code class="codespan">single</code> and <code class="codespan">multiple</code> selection, the former of which supports clearing selection on click, and the latter selecting multiple areas;</li>\n<li><code class="codespan">&#39;clear&#39;</code>: for clearing all selections.</li>\n</ul>\n',
    )
    brushLink: Optional[Union[Any, str]] = Field(
        None,
        description='<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code class="codespan">scatter</code> and <code class="codespan">parallel</code> charts once a scatter chart is selected.</p>\n<p><code class="codespan">brushLink</code> is an array of <code class="codespan">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code class="codespan">[3, 4, 5]</code> for interacting series with seriesIndex as <code class="codespan">3</code>, <code class="codespan">4</code>, or <code class="codespan">5</code>;</li>\n<li><code class="codespan">&#39;all&#39;</code> for interacting all series;</li>\n<li><code class="codespan">&#39;none&#39;</code>, or <code class="codespan">null</code>, or <code class="codespan">undefined</code> for disabling <code class="codespan">brushLink</code>.</li>\n</ul>\n<p><strong>Attention</strong></p>\n<p><code class="codespan">brushLink</code> is a mapping of <code class="codespan">dataIndex</code>. So <strong><code class="codespan">data</code> of every series with <code class="codespan">brushLink</code> should be guaranteed to correspond to the other</strong>.</p>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    brush: {\n        brushLink: [0, 1]\n    },\n    series: [\n        {\n            type: &#39;bar&#39;\n            data: [232,    4434,    545,      654]     // data has 4 items\n        },\n        {\n            type: &#39;parallel&#39;,\n            data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n        }\n    ]\n};\n</code></pre>\n',
    )
    seriesIndex: Optional[Union[Any, float, str]] = Field(
        'all',
        description='<p>Assigns which of the series can use brush selecting, whose value can be:</p>\n<ul>\n<li><code class="codespan">&#39;all&#39;</code>: all series;</li>\n<li><code class="codespan">&#39;Array&#39;</code>: series index array;</li>\n<li><code class="codespan">&#39;number&#39;</code>: certain series index.</li>\n</ul>\n',
    )
    geoIndex: Optional[Union[Any, float, str]] = Field(
        None,
        description='<p>Assigns which of the geo can use brush selecting.</p>\n<p><code class="codespan">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class="codespan">roam</code> and <code class="codespan">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class="codespan">geo</code> charts.</p>\n<p>By assigning <a href="#brush.geoIndex">brush.geoIndex</a>, or <a href="#brush.xAxisIndex">brush.xAxisIndex</a>, or <a href="#brush.yAxisIndex">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class="codespan">&#39;all&#39;</code>: for all axes;</li>\n<li><code class="codespan">number</code>: like <code class="codespan">0</code>, for a particular coordinate with that index;</li>\n<li><code class="codespan">Array</code>: like <code class="codespan">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class="codespan">&#39;none&#39;</code>, or <code class="codespan">null</code>, or <code class="codespan">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n',
    )
    xAxisIndex: Optional[Union[Any, float, str]] = Field(
        None,
        description='<p>Assigns which of the xAxisIndex can use brush selecting.</p>\n<p><code class="codespan">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class="codespan">roam</code> and <code class="codespan">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class="codespan">geo</code> charts.</p>\n<p>By assigning <a href="#brush.geoIndex">brush.geoIndex</a>, or <a href="#brush.xAxisIndex">brush.xAxisIndex</a>, or <a href="#brush.yAxisIndex">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class="codespan">&#39;all&#39;</code>: for all axes;</li>\n<li><code class="codespan">number</code>: like <code class="codespan">0</code>, for a particular coordinate with that index;</li>\n<li><code class="codespan">Array</code>: like <code class="codespan">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class="codespan">&#39;none&#39;</code>, or <code class="codespan">null</code>, or <code class="codespan">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n',
    )
    yAxisIndex: Optional[Union[Any, float, str]] = Field(
        None,
        description='<p>Assigns which of the yAxisIndex can use brush selecting.</p>\n<p><code class="codespan">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class="codespan">roam</code> and <code class="codespan">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class="codespan">geo</code> charts.</p>\n<p>By assigning <a href="#brush.geoIndex">brush.geoIndex</a>, or <a href="#brush.xAxisIndex">brush.xAxisIndex</a>, or <a href="#brush.yAxisIndex">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class="codespan">&#39;all&#39;</code>: for all axes;</li>\n<li><code class="codespan">number</code>: like <code class="codespan">0</code>, for a particular coordinate with that index;</li>\n<li><code class="codespan">Array</code>: like <code class="codespan">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class="codespan">&#39;none&#39;</code>, or <code class="codespan">null</code>, or <code class="codespan">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n',
    )
    brushType: Optional[str] = Field(
        'rect',
        description='<p>Default type of brush.</p>\n<ul>\n<li><code class="codespan">&#39;rect&#39;</code>: for selection-box in rectangle shape;</li>\n<li><code class="codespan">&#39;polygon&#39;</code>: for selection-box in polygon shape;</li>\n<li><code class="codespan">&#39;lineX&#39;</code>: for horizontal selection-box;</li>\n<li><code class="codespan">&#39;lineY&#39;</code>: for vertical selection-box;</li>\n</ul>\n',
    )
    brushMode: Optional[str] = Field(
        'single',
        description='<p>Default brush mode, whose value can be:</p>\n<ul>\n<li><code class="codespan">&#39;single&#39;</code>: for single selection;</li>\n<li><code class="codespan">&#39;multiple&#39;</code>: for multiple selection.</li>\n</ul>\n',
    )
    transformable: Optional[bool] = Field(
        True,
        description='<p>Determines whether a selected box can be changed in shape or translated.</p>\n',
    )
    brushStyle: Optional[Any] = Field(
        None,
        description='<p>Default brush style, whose value is:</p>\n<pre><code class="lang-javascript">{\n    borderWidth: 1,\n    color: &#39;rgba(120,140,180,0.3)&#39;,\n    borderColor: &#39;rgba(120,140,180,0.8)&#39;\n},\n</code></pre>\n',
    )
    throttleType: Optional[str] = Field(
        'fixRate',
        description='<p>By default, <code class="codespan">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href="#brush.throttleType">brush.throttleType</a> and <a href="#brush.throttleDelay">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class="codespan">throttleType</code> values can be:</p>\n<ul>\n<li><code class="codespan">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href="#brush.throttleDelay">brush.throttleDelay</a>;</li>\n<li><code class="codespan">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href="#brush.throttleDelay">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href="http://localhost/echarts-website/examples/en/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1" target="_blank">example</a>, <code class="codespan">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n',
    )
    throttleDelay: Optional[float] = Field(
        0,
        description='<p><code class="codespan">0</code> for disabling throttle.</p>\n<p>By default, <code class="codespan">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href="#brush.throttleType">brush.throttleType</a> and <a href="#brush.throttleDelay">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class="codespan">throttleType</code> values can be:</p>\n<ul>\n<li><code class="codespan">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href="#brush.throttleDelay">brush.throttleDelay</a>;</li>\n<li><code class="codespan">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href="#brush.throttleDelay">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href="http://localhost/echarts-website/examples/en/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1" target="_blank">example</a>, <code class="codespan">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n',
    )
    removeOnClick: Optional[bool] = Field(
        True,
        description='<p>Defined whether <em>clearing all select-boxes on click</em> is enabled when <a href="#brush.brushMode">brush.brushMode</a> is <code class="codespan">&#39;single&#39;</code>.</p>\n',
    )
    inBrush: Optional[Any] = Field(
        None,
        description='<p>Defines visual effects of items in selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class="codespan">symbol</code>: Type of symbol.</li>\n<li><code class="codespan">symbolSize</code>: Symbol size.</li>\n<li><code class="codespan">color</code>: Symbol color.</li>\n<li><code class="codespan">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class="codespan">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class="codespan">colorLightness</code>: Lightness in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorSaturation</code>: Saturation in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorHue</code>: Hue in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n</ul>\n<p>In most cases, inBrush can be left unassigned, in which case default visual configuration remains.</p>\n',
    )
    outOfBrush: Optional[Any] = Field(
        None,
        description='<p>Defines visual effects of items out of selection.</p>\n<p>Available visual effects include:</p>\n<ul>\n<li><code class="codespan">symbol</code>: Type of symbol.</li>\n<li><code class="codespan">symbolSize</code>: Symbol size.</li>\n<li><code class="codespan">color</code>: Symbol color.</li>\n<li><code class="codespan">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class="codespan">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class="codespan">colorLightness</code>: Lightness in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorSaturation</code>: Saturation in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorHue</code>: Hue in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n</ul>\n<p><strong>Note:</strong> If <code class="codespan">outOfBrush</code> is not assigned, <code class="codespan">color</code> will be set to be <code class="codespan">&#39;#ddd&#39;</code> by default. If the color is not desired, you can use:</p>\n<pre><code class="lang-javascript">brush: {\n    ...,\n    outOfBrush: {\n        colorAlpha: 0.1\n    }\n}\n</code></pre>\n',
    )
    z: Optional[float] = Field(
        10000,
        description='<p>z-index of brush cover box. It can be adjust when incorrect overlap occurs.</p>\n',
    )


class Projection(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.3.0</code></p>
    </blockquote>
    <p>For custom map projection, at least two methods <code class="codespan">project</code>, <code class="codespan">unproject</code> should be provided to calculate the coordinates after projection and before projection respectively.</p>
    <p>For example, for the Mercator projection.</p>
    <pre><code class="lang-ts">series: {
        type: &#39;map&#39;,
        projection: {
            project: (point) =&gt; [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
            unproject: (point) =&gt; [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]
        }
    }
    </code></pre>
    <p>In addition to our own implementation of the projection formula, we can also use exists projection implementations provided by third-party libraries such as <a href="https://github.com/d3/d3-geo" target="_blank">d3-geo</a>.</p>
    <pre><code class="lang-ts">const projection = d3.geoConicEqualArea();
    // ...
    series: {
        type: &#39;map&#39;,
        projection: {
            project: (point) =&gt; projection(point),
            unproject: (point) =&gt; projection.invert(point)
        }
    }

    </code></pre>
    <p>Note: Custom projections are only useful when using <code class="codespan">GeoJSON</code> as a data source.</p>

    """

    project: Optional[Any] = Field(
        None,
        description='<pre><code class="lang-ts">(coord: [number, number]) =&gt; [number, number]\n</code></pre>\n<p>Projection of latitude and longitude coordinates to other coordinates.</p>\n',
    )
    unproject: Optional[Any] = Field(
        None,
        description='<pre><code class="lang-ts">(point: [number, number]) =&gt; [number, number]\n</code></pre>\n<p>Calculate the raw latitude and longitude coordinates from the projected coordinates</p>\n',
    )
    stream: Optional[Any] = Field(
        None,
        description='<p>This property is mainly used to adapt the <a href="https://github.com/d3/d3-geo#streams" target="_blank">stream</a> interface used in <a href="https://github.com/d3/d3-geo" target="_blank">d3-geo</a>. After introducing stream, you can introduce both the <a href="https://bl.ocks.org/mbostock/3788999" target="_blank">Antimeridian Clipping</a> and <a href="https://bl.ocks.org/mbostock/3795544" target="_blank">Adaptive Sampling</a> algorithms implemented in <a href="https://bl.ocks.org/mbostock/3795544" target="_blank">d3-geo</a>.</p>\n<pre><code class="lang-ts">const projection = d3.geoProjection((x, y) =&gt; ([x, y / 0.75]))\n    .rotate([-115, 0]);\n// ...\nseries: {\n    type: &#39;map&#39;,\n    projection: {\n        // We still need project and unproject when stream is provided.\n        project: (point) =&gt; projection(point),\n        unproject: (point) =&gt; projection.invert(point),\n        // We can directly use the stream method in d3 projection.\n        stream: projection.stream\n    }\n}\n</code></pre>\n<p>Note: <code class="codespan">stream</code> is not required in the <code class="codespan">projection</code>.</p>\n',
    )


class ScaleLimit(BaseModel):
    """
    <p>Limit of scaling, with <code class="codespan">min</code> and <code class="codespan">max</code>. <code class="codespan">1</code> by default.</p>

    """

    min: Optional[float] = Field(None, description='<p>Minimum scaling</p>\n')
    max: Optional[float] = Field(None, description='<p>Maximum scaling</p>\n')


class _StyleName18(_StyleName3):
    pass


class Rich18(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName18] = Field(
        None, alias='<style_name>', description=''
    )


class Label8(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich18] = Field(
        None,
        description='<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',
    )


class ItemStyle2(BaseModel):
    """
    <p>Graphic style of Map Area Border, <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    areaColor: Optional[Any] = Field(
        '#eee',
        description='<p>Area filling 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',
    )
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName19(_StyleName3):
    pass


class Rich19(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName19] = Field(
        None, alias='<style_name>', description=''
    )


class Label9(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich19] = Field(
        None,
        description='<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',
    )


class ItemStyle3(BaseModel):
    areaColor: Optional[Any] = Field(
        '#eee',
        description='<p>The color of the map area.</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',
    )
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class Emphasis8(BaseModel):
    """
    <p>Map area style in highlighted state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.1.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<p><strong>Example: </strong></p>\n<pre><code class="lang-ts">emphasis: {\n    focus: &#39;self&#39;\n}\n</code></pre>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=geo-organ&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n\n\n\n\n\n\n\n\n',
    )
    label: Optional[Label9] = Field(None, description='')
    itemStyle: Optional[ItemStyle3] = Field(None, description='')


class _StyleName20(_StyleName3):
    pass


class Rich20(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName20] = Field(
        None, alias='<style_name>', description=''
    )


class Label10(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich20] = Field(
        None,
        description='<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',
    )


class ItemStyle4(ItemStyle3):
    pass


class Select(BaseModel):
    """
    <p>Map area style in selected state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label10] = Field(None, description='')
    itemStyle: Optional[ItemStyle4] = Field(None, description='')


class _StyleName21(_StyleName3):
    pass


class Rich21(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName21] = Field(
        None, alias='<style_name>', description=''
    )


class Label11(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich21] = Field(
        None,
        description='<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',
    )


class ItemStyle5(ItemStyle3):
    pass


class Blur(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.1.0</code></p>
    </blockquote>
    <p>Map area style in blurred state.</p>

    """

    label: Optional[Label11] = Field(None, description='')
    itemStyle: Optional[ItemStyle5] = Field(None, description='')


class ItemStyle6(BaseModel):
    """
    <p>Item style of this area.</p>

    """

    areaColor: Optional[Any] = Field(
        None,
        description='<p>Area color in the map.</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',
    )
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName22(_StyleName3):
    pass


class Rich22(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName22] = Field(
        None, alias='<style_name>', description=''
    )


class Label12(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich22] = Field(
        None,
        description='<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',
    )


class ItemStyle7(BaseModel):
    areaColor: Optional[Any] = Field(
        None,
        description='<p>The color of the map area.</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',
    )
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName23(_StyleName3):
    pass


class Rich23(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName23] = Field(
        None, alias='<style_name>', description=''
    )


class Label13(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich23] = Field(
        None,
        description='<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',
    )


class Emphasis9(BaseModel):
    """
    <p>Style of emphasis region.</p>

    """

    itemStyle: Optional[ItemStyle7] = Field(None, description='')
    label: Optional[Label13] = Field(None, description='')


class ItemStyle8(ItemStyle7):
    pass


class _StyleName24(_StyleName3):
    pass


class Rich24(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName24] = Field(
        None, alias='<style_name>', description=''
    )


class Label14(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich24] = Field(
        None,
        description='<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',
    )


class Select1(BaseModel):
    """
    <p>Style of selected region.</p>

    """

    itemStyle: Optional[ItemStyle8] = Field(None, description='')
    label: Optional[Label14] = Field(None, description='')


class ItemStyle9(ItemStyle7):
    pass


class _StyleName25(_StyleName3):
    pass


class Rich25(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName25] = Field(
        None, alias='<style_name>', description=''
    )


class Label15(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich25] = Field(
        None,
        description='<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',
    )


class Blur1(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.1.0</code></p>
    </blockquote>
    <p>Style of blurred region.</p>

    """

    itemStyle: Optional[ItemStyle9] = Field(None, description='')
    label: Optional[Label15] = Field(None, description='')


class TextStyle12(TextStyle2):
    """
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip3(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.1.0</code></p>
    </blockquote>
    <p>tooltip settings in this region.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the tooltip component.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code 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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<p>The background color of tooltip&#39;s floating layer.</p>\n',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\n\n\n\n\n\n\n\n\n\n<p>The border color of tooltip&#39;s floating layer.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n\n\n\n\n\n\n\n\n<p>The border width of tooltip&#39;s floating layer.</p>\n',
    )
    padding: Optional[float] = Field(
        5,
        description='\n\n\n\n\n\n\n\n\n\n\n\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',
    )
    textStyle: Optional[TextStyle12] = Field(
        None, description='<p>The text syle of tooltip&#39;s floating layer.</p>\n'
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\n\n\n\n\n\n\n\n\n\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',
    )


class Region(BaseModel):
    name: Optional[str] = Field(
        None,
        description='<p>Name of area in map, like <code class="codespan">&#39;Guangdong&#39;</code>, or <code class="codespan">&#39;Zhejiang&#39;</code>.</p>\n',
    )
    selected: Optional[bool] = Field(
        False, description='<p>Whether this area is selected.</p>\n'
    )
    itemStyle: Optional[ItemStyle6] = Field(
        None, description='<p>Item style of this area.</p>\n'
    )
    label: Optional[Label12] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    emphasis: Optional[Emphasis9] = Field(
        None, description='<p>Style of emphasis region.</p>\n'
    )
    select: Optional[Select1] = Field(
        None, description='<p>Style of selected region.</p>\n'
    )
    blur: Optional[Blur1] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.1.0</code></p>\n</blockquote>\n<p>Style of blurred region.</p>\n',
    )
    tooltip: Optional[Tooltip3] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.1.0</code></p>\n</blockquote>\n<p>tooltip settings in this region.</p>\n',
    )


class TextStyle13(TextStyle2):
    """
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip4(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.1.0</code></p>
    </blockquote>
    <p>tooltip settings in the coordinate system component.</p>
    <p><strong>General Introduction:</strong></p>
    <p>tooltip can be configured on different places:</p>
    <ul>
    <li><p>Configured on global: <a href="#tooltip">tooltip</a></p>
    </li>
    <li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>
    </li>
    <li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>
    </li>
    <li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>
    </li>
    </ul>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the tooltip component.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code 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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<p>The background color of tooltip&#39;s floating layer.</p>\n',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\n\n\n\n\n\n\n\n\n\n<p>The border color of tooltip&#39;s floating layer.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n\n\n\n\n\n\n\n\n<p>The border width of tooltip&#39;s floating layer.</p>\n',
    )
    padding: Optional[float] = Field(
        5,
        description='\n\n\n\n\n\n\n\n\n\n\n\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',
    )
    textStyle: Optional[TextStyle13] = Field(
        None, description='<p>The text syle of tooltip&#39;s floating layer.</p>\n'
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\n\n\n\n\n\n\n\n\n\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',
    )


class Geo(BaseModel):
    """
        <p>Geographic coorinate system component.</p>
    <p>Geographic coorinate system component is used to draw maps, which also supports <a href="#series-scatter">scatter series</a>, and <a href="#series-lines">line series</a>.</p>
    <p>From <code class="codespan">3.1.10</code>, geo component also supports mouse events, whose parameters are:</p>
    <pre><code class="lang-ts">{
        componentType: &#39;geo&#39;,
        // geo component&#39;s index in option
        geoIndex: number,
        // name of clicking area, e.g., Shanghai
        name: string,
        // clicking region object as input, see geo.regions
        region: Object
    }
    </code></pre>
    <p><strong>Tip:</strong>
    The region color can also be controlled by map series. See <a href="#series-map.geoIndex">series-map.geoIndex</a>.</p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='<p>Whether to show the geo component.</p>\n'
    )
    map: Optional[str] = Field(
        '',
        description='<p>Map name registered in <a href="api.html#echarts.registerMap" target="_blank">registerMap</a>.</p>\n<p><strong>Use geoJSON</strong></p>\n<pre><code class="lang-ts">$.get(&#39;map/china_geo.json&#39;, function (chinaJson) {\n    echarts.registerMap(&#39;china&#39;, {geoJSON: geoJson});\n    var chart = echarts.init(document.getElementById(&#39;main&#39;));\n    chart.setOption({\n        geo: [{\n            map: &#39;china&#39;,\n            ...\n        }]\n    });\n});\n</code></pre>\n<p>See also <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-hexbin" target="_blank">geoJSON hexbin</a>.</p>\n<p>The demo above shows that ECharts can uses <a href="http://geojson.org/" target="_blank">geoJSON</a> format as map outline. You can use third-party <a href="http://geojson.org/" target="_blank">geoJSON</a> data (like <a href="https://github.com/echarts-maps" target="_blank">maps</a>) and register them into ECharts.</p>\n<p><strong>Use SVG</strong></p>\n<pre><code class="lang-ts">$.get(&#39;map/topographic_map.svg&#39;, function (svg) {\n    echarts.registerMap(&#39;topo&#39;, {svg: svg});\n    var chart = echarts.init(document.getElementById(&#39;main&#39;));\n    chart.setOption({\n        geo: [{\n            map: &#39;topo&#39;,\n            ...\n        }]\n    });\n});\n</code></pre>\n<p>See also <a href="http://localhost/echarts-website/examples/en/editor.html?c=geo-seatmap-flight" target="_blank">Flight Seatmap</a>.</p>\n<p>The demo above shows that SVG format can be used in ECharts. See more info in <a href="tutorial.html#SVG%20Base%20Map%20in%20Geo%20Coords%20and%20Map%20Series" target="_blank">SVG Base Map</a>.</p>\n',
    )
    roam: Optional[Union[bool, str]] = Field(
        False,
        description='\n\n<p>Whether to enable mouse zooming and translating. <code class="codespan">false</code> by default. If either zooming or translating is wanted, it can be set to <code class="codespan">&#39;scale&#39;</code> or <code class="codespan">&#39;move&#39;</code>. Otherwise, set it to be <code class="codespan">true</code> to enable both.</p>\n',
    )
    projection: Optional[Projection] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.3.0</code></p>\n</blockquote>\n<p>For custom map projection, at least two methods <code class="codespan">project</code>, <code class="codespan">unproject</code> should be provided to calculate the coordinates after projection and before projection respectively.</p>\n<p>For example, for the Mercator projection.</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;map&#39;,\n    projection: {\n        project: (point) =&gt; [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],\n        unproject: (point) =&gt; [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]\n    }\n}\n</code></pre>\n<p>In addition to our own implementation of the projection formula, we can also use exists projection implementations provided by third-party libraries such as <a href="https://github.com/d3/d3-geo" target="_blank">d3-geo</a>.</p>\n<pre><code class="lang-ts">const projection = d3.geoConicEqualArea();\n// ...\nseries: {\n    type: &#39;map&#39;,\n    projection: {\n        project: (point) =&gt; projection(point),\n        unproject: (point) =&gt; projection.invert(point)\n    }\n}\n\n</code></pre>\n<p>Note: Custom projections are only useful when using <code class="codespan">GeoJSON</code> as a data source.</p>\n',
    )
    center: Optional[Any] = Field(
        None,
        description='<p>Center of current view-port, in longitude and latitude by default. Use the projected coordinates if <code class="codespan">projection</code> is set.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">center: [115.97, 29.71]\n</code></pre>\n<pre><code class="lang-ts">projection: {\n    projection: (pt) =&gt; project(pt)\n},\ncenter: project([115.97, 29.71])\n</code></pre>\n',
    )
    aspectScale: Optional[float] = Field(
        0.75,
        description='<p>Used to scale aspect of geo. Will be ignored if <code class="codespan">projection</code> is set.</p>\n<p>The final aspect is calculated by: <code class="codespan">geoBoundingRect.width / geoBoundingRect.height * aspectScale</code>.</p>\n',
    )
    boundingCoords: Optional[Any] = Field(
        None,
        description='<p>Two dimension array. Define coord of left-top, right-bottom in layout box.</p>\n<pre><code class="lang-ts">// A complete world map\nmap: &#39;world&#39;,\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n    // [lng, lat] of left-top corner\n    [-180, 90],\n    // [lng, lat] of right-bottom corner\n    [180, -90]\n],\n</code></pre>\n',
    )
    zoom: Optional[float] = Field(
        1, description='<p>Zoom rate of current view-port.</p>\n'
    )
    scaleLimit: Optional[ScaleLimit] = Field(
        None,
        description='<p>Limit of scaling, with <code class="codespan">min</code> and <code class="codespan">max</code>. <code class="codespan">1</code> by default.</p>\n',
    )
    nameMap: Optional[Any] = Field(
        None,
        description='<p>Name mapping for customized areas. For example:</p>\n<pre><code class="lang-ts">{\n    &#39;China&#39; : &#39;中国&#39;\n}\n</code></pre>\n',
    )
    nameProperty: Optional[str] = Field(
        'name',
        description='<blockquote>\n<p>Since <code class="codespan">v4.8.0</code></p>\n</blockquote>\n<p>customized property key for GeoJSON feature. By default, &#39;name&#39; is used as primary key to identify GeoJSON feature.\nFor example:</p>\n<pre><code class="lang-ts">{\n    nameProperty: &#39;NAME&#39;, // key to connect following data point to GeoJSON region {&quot;type&quot;:&quot;Feature&quot;,&quot;id&quot;:&quot;01&quot;,&quot;properties&quot;:{&quot;NAME&quot;:&quot;Alabama&quot;}, &quot;geometry&quot;: { ... }}\n    data:[\n        {name: &#39;Alabama&#39;, value: 4822023},\n        {name: &#39;Alaska&#39;, value: 731449},\n    ]\n}\n</code></pre>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Selected mode decides whether multiple selecting is supported. By default, <code class="codespan">false</code> is used for disabling selection. Its value can also be <code class="codespan">&#39;single&#39;</code> for selecting single area, or <code class="codespan">&#39;multiple&#39;</code> for selecting multiple areas.</p>\n',
    )
    label: Optional[Label8] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    itemStyle: Optional[ItemStyle2] = Field(
        None,
        description='<p>Graphic style of Map Area Border, <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    emphasis: Optional[Emphasis8] = Field(
        None, description='<p>Map area style in highlighted state.</p>\n'
    )
    select: Optional[Select] = Field(
        None, description='<p>Map area style in selected state.</p>\n'
    )
    blur: Optional[Blur] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.1.0</code></p>\n</blockquote>\n<p>Map area style in blurred state.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    layoutCenter: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">layoutCenter</code> and <code class="codespan">layoutSize</code> provides layout strategy other than <code class="codespan">left/right/top/bottom/width/height</code>.</p>\n<p>When using <code class="codespan">left/right/top/bottom/width/height</code>, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, <code class="codespan">layoutCenter</code> attribute can be used to define the center position of map, and <code class="codespan">layoutSize</code> can be used to define the size of map. For example:</p>\n<pre><code class="lang-ts">layoutCenter: [&#39;30%&#39;, &#39;30%&#39;],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n</code></pre>\n<p>After setting these two values, <code class="codespan">left/right/top/bottom/width/height</code> becomes invalid.</p>\n',
    )
    layoutSize: Optional[Union[float, str]] = Field(
        None,
        description='<p>Size of map, see <code class="codespan">layoutCenter</code> for more information. Percentage relative to screen width, and absolute pixel values are supported.</p>\n',
    )
    regions: Optional[List[Region]] = Field(
        None,
        description='<p>Configure style for specified regions.\nFor example:</p>\n<pre><code class="lang-ts">regions: [{\n    name: &#39;Guangdong&#39;,\n    itemStyle: {\n        areaColor: &#39;red&#39;,\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>\n<p>The region color can also be controlled by map series. See <a href="#series-map.geoIndex">series-map.geoIndex</a>.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    tooltip: Optional[Tooltip4] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.1.0</code></p>\n</blockquote>\n<p>tooltip settings in the coordinate system component.</p>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href="#tooltip">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>\n</li>\n</ul>\n',
    )


class _StyleName26(_StyleName5):
    pass


class Rich26(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName26] = Field(
        None, alias='<style_name>', description=''
    )


class NameTextStyle3(BaseModel):
    """
    <p>Text style of axis name.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Color of axis name uses <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>axis name font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich26] = Field(
        None,
        description='<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',
    )


class LineStyle35(LineStyle3):
    pass


class AxisLine5(BaseModel):
    """
    <p>Settings related to axis line.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis line from showing.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'none',
        description='\n\n<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class="codespan">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class="codespan">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class="codespan">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n',
    )
    symbolSize: Optional[Any] = Field(
        '[10, 15]',
        description='\n\n<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n',
    )
    symbolOffset: Optional[Union[Any, float]] = Field(
        '[0, 0]',
        description='\n\n<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n',
    )
    lineStyle: Optional[LineStyle35] = Field(None, description='')


class LineStyle36(BaseModel):
    """
    <p>Line style of axis ticks.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='<p>Color of axis label is set to be <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>axisTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class AxisTick5(BaseModel):
    """
    <p>Settings related to axis tick.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis tick from showing.</p>\n',
    )
    alignWithLabel: Optional[bool] = Field(
        False,
        description='\n\n<p>Align axis tick with label, which is available only when <code class="codespan">boundaryGap</code> is set to be <code class="codespan">true</code> in category axis. See the following picture:</p>\n<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href="#parallelAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    length: Optional[float] = Field(
        5, description='\n\n<p>The length of the axis tick.</p>\n'
    )
    lineStyle: Optional[LineStyle36] = Field(
        None, description='<p>Line style of axis ticks.</p>\n'
    )


class LineStyle37(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Style configuration of minor ticks lines <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>minorTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class MinorTick4(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Settings related minor ticks.</p>
    <p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>
    <p>Examples:</p>
    <p>1) Using minor ticks in function plotting.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>


    <p>2) Using minor ticks in log axis.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>


    """

    show: Optional[bool] = Field(False, description='\n\n<p>If show minor ticks.</p>\n')
    splitNumber: Optional[float] = Field(
        5, description='\n\n<p>Number of interval splited by minor ticks.</p>\n'
    )
    length: Optional[float] = Field(
        3, description='\n\n<p>Length of minor ticks lines。</p>\n'
    )
    lineStyle: Optional[LineStyle37] = Field(None, description='')


class _StyleName27(_StyleName5):
    pass


class Rich27(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName27] = Field(
        None, alias='<style_name>', description=''
    )


class AxisLabel5(BaseModel):
    """
    <p>Settings related to axis label.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis label from appearing.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    rotate: Optional[float] = Field(
        0,
        description='\n\n<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n',
    )
    margin: Optional[float] = Field(
        8,
        description='\n\n<p>The margin between the axis label and the axis line.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    showMinLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the min tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n',
    )
    showMaxLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the max tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n',
    )
    hideOverlap: Optional[bool] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>Whether to hide overlapped labels.</p>\n',
    )
    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p>Color of axis label is set to be <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class="lang-ts">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class="lang-ts">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich27] = Field(
        None,
        description='<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',
    )


class _StyleName28(_StyleName):
    pass


class Rich28(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName28] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle14(BaseModel):
    """
    <p>Text style of the category.</p>

    """

    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich28] = Field(
        None,
        description='<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',
    )


class Datum5(BaseModel):
    value: Optional[str] = Field(None, description='<p>Name of a category.</p>\n')
    textStyle: Optional[TextStyle14] = Field(
        None, description='<p>Text style of the category.</p>\n'
    )


class ParallelAxisDefault(BaseModel):
    """
        <p>When configuring multiple <a href="#parallelAxis">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> will be merged into <a href="#parallelAxis">parallelAxis</a> to generate the final axis configuration.</p>
    <p><a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/parallel-all&amp;edit=1&amp;reset=1" target="_blank">See the sample</a>.</p>
    <p><br></p>

    """

    type: Optional[str] = Field(
        'value',
        description='<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class="codespan">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class="codespan">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href="#series.data">series.data</a> or <a href="#dataset.source">dataset.source</a>, or can be specified via <a href="#parallelAxis.data">parallelAxis.data</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class="codespan">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n',
    )
    name: Optional[str] = Field(None, description='\n\n<p>Name of axis.</p>\n')
    nameLocation: Optional[str] = Field(
        'end',
        description='\n\n<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class="codespan">&#39;start&#39;</code></li>\n<li><code class="codespan">&#39;middle&#39;</code> or <code class="codespan">&#39;center&#39;</code></li>\n<li><code class="codespan">&#39;end&#39;</code></li>\n</ul>\n',
    )
    nameTextStyle: Optional[NameTextStyle3] = Field(
        None, description='<p>Text style of axis name.</p>\n'
    )
    nameGap: Optional[float] = Field(
        15, description='\n\n<p>Gap between axis name and axis line.</p>\n'
    )
    nameRotate: Optional[float] = Field(
        None, description='\n\n<p>Rotation of axis name.</p>\n'
    )
    inverse: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n',
    )
    boundaryGap: Optional[Union[bool, Any]] = Field(
        None,
        description='\n\n<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class="codespan">boundaryGap</code> of category axis can be set to either <code class="codespan">true</code> or <code class="codespan">false</code>. Default value is set to be <code class="codespan">true</code>, in which case <a href="#parallelAxis.axisTick">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href="#parallelAxis.axisTick">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class="codespan">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href="#parallelAxis.min">min</a> and <a href="#parallelAxis.max">max</a>.\n<strong>Example: </strong></p>\n<pre><code class="lang-ts">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n',
    )
    min: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class="lang-ts">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the min value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated min value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    max: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class="lang-ts">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the max value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated max value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    scale: Optional[bool] = Field(
        False,
        description='\n\n<p>It is available only in numerical axis, i.e., <a href="#parallelAxis.type">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class="codespan">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href="#parallelAxis.min">min</a> and <a href="#parallelAxis.max">max</a> are set.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        5,
        description='\n\n<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n',
    )
    minInterval: Optional[float] = Field(
        0,
        description='\n\n<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class="codespan">1</code> to make sure axis label is show as integer.</p>\n<pre><code class="lang-ts">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href="#parallelAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    maxInterval: Optional[float] = Field(
        None,
        description='\n\n<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href="#parallelAxis.type">type</a> is &#39;time&#39;), it can be set to be <code class="codespan">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class="lang-ts">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href="#parallelAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    interval: Optional[float] = Field(
        None,
        description='\n\n<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href="#parallelAxis.splitNumber">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href="#parallelAxis.min">min</a> and <a href="#parallelAxis.max">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href="#parallelAxis.type">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href="#parallelAxis.type">type</a>: &#39;log&#39; axis.</p>\n',
    )
    logBase: Optional[float] = Field(
        10,
        description='\n\n<p>Base of logarithm, which is valid only for numeric axes with <a href="#parallelAxis.type">type</a>: &#39;log&#39;.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code>, to prevent interaction with the axis.</p>\n',
    )
    triggerEvent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class="lang-ts">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n',
    )
    axisLine: Optional[AxisLine5] = Field(
        None, description='<p>Settings related to axis line.</p>\n'
    )
    axisTick: Optional[AxisTick5] = Field(
        None, description='<p>Settings related to axis tick.</p>\n'
    )
    minorTick: Optional[MinorTick4] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>\n\n',
    )
    axisLabel: Optional[AxisLabel5] = Field(
        None, description='<p>Settings related to axis label.</p>\n'
    )
    data: Optional[List[Datum5]] = Field(
        None,
        description='<p>Category data, available in <a href="#parallelAxis.type">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href="#parallelAxis.type">type</a> is not specified, but <code class="codespan">axis.data</code> is specified, the <a href="#parallelAxis.type">type</a> is auto set as <code class="codespan">&#39;category&#39;</code>.</p>\n<p>If <a href="#parallelAxis.type">type</a> is specified as <code class="codespan">&#39;category&#39;</code>, but <code class="codespan">axis.data</code> is not specified, <code class="codespan">axis.data</code> will be auto collected from <a href="#series.data">series.data</a>. It brings convenience, but we should notice that <code class="codespan">axis.data</code> provides then value range of the <code class="codespan">&#39;category&#39;</code> axis. If  it is auto collected from <a href="#series.data">series.data</a>, Only the values appearing in <a href="#series.data">series.data</a> can be collected. For example, if <a href="#series.data">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n',
    )


class Parallel(BaseModel):
    """
        <p><strong>Introduction about Parallel coordinates</strong></p>
    <p><a href="https://en.wikipedia.org/wiki/Parallel_coordinates" target="_blank">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>
    <p>For example, <a href="#series-parallel.data">series-parallel.data</a> is the following data:</p>
    <pre><code class="lang-javascript">[
        [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],
        [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],
        [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],
        [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],
        { // Data item can also be an Object, so that perticular settings of its line can be set here.
            value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]
            lineStyle: {...},
        }
        ...
    ]
    </code></pre>
    <p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>
    <p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/parallel-all&edit=1&reset=1" width="600" height="400"></iframe>



    <p><strong>Brief about Configuration</strong></p>
    <p>Basic configuration parallel coordinates is shown as follow:</p>
    <pre><code class="lang-javascript">option = {
        parallelAxis: [                     // Definitions of axes.
            {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.
            {dim: 1, name: schema[1].text},
            {dim: 2, name: schema[2].text},
            {dim: 3, name: schema[3].text},
            {dim: 4, name: schema[4].text},
            {dim: 5, name: schema[5].text},
            {dim: 6, name: schema[6].text},
            {dim: 7, name: schema[7].text,
                type: &#39;category&#39;,           // Also supports category data.
                data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]
            }
        ],
        parallel: {                         // Definition of a parallel coordinate system.
            left: &#39;5%&#39;,                     // Location of parallel coordinate system.
            right: &#39;13%&#39;,
            bottom: &#39;10%&#39;,
            top: &#39;20%&#39;,
            parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.
                type: &#39;value&#39;,
                nameLocation: &#39;end&#39;,
                nameGap: 20
            }
        },
        series: [                           // Here the three series sharing the same parallel coordinate system.
            {
                name: &#39;Beijing&#39;,
                type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;
                data: [
                    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],
                    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],
                    ...
                ]
            },
            {
                name: &#39;Shanghai&#39;,
                type: &#39;parallel&#39;,
                data: [
                    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],
                    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],
                    ...
                ]
            },
            {
                name: &#39;Guangzhou&#39;,
                type: &#39;parallel&#39;,
                data: [
                    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],
                    [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],
                    ...
                ]
            }
        ]
    };
    </code></pre>
    <p>Three components are involved here: <a href="#parallel">parallel</a>, <a href="#parallelAxis">parallelAxis</a>, <a href="#series-parallel">series-parallel</a></p>
    <ul>
    <li><p><a href="#parallel">parallel</a></p>
    <p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>
    <p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>
    <p>  Position setting is also carried out here.</p>
    </li>
    <li><p><a href="#parallelAxis">parallelAxis</a></p>
    <p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>
    <p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>
    </li>
    <li><p><a href="#series-parallel">series-parallel</a></p>
    <p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>
    <p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>
    </li>
    </ul>
    <p><strong>Notes and Best Practices</strong></p>
    <p>When configuring multiple <a href="#parallelAxis">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> will be merged into <a href="#parallelAxis">parallelAxis</a> to generate the final axis configuration.</p>
    <p><strong>If data is too large and cause bad performance</strong></p>
    <p>It is suggested to set <a href="#series-parallel.lineStyle.width">series-parallel.lineStyle.width</a> to be <code class="codespan">0.5</code> (or less), which may improve performance significantly.</p>
    <p><strong>Display High-Dimension Data</strong></p>
    <p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>
    <p>In this case, you may use <a href="#parallel.axisExpandable">parallel.axisExpandable</a> to improve the display. See this example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=map-parallel-prices&edit=1&reset=1" width="600" height="460"></iframe>










    <p><br>
    <br></p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        80,
        description='<p>Distance between parallel  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        60,
        description='<p>Distance between parallel  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        80,
        description='<p>Distance between parallel  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        60,
        description='<p>Distance between parallel  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Width of parallel  component. Adaptive by default.</p>\n',
    )
    height: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Height of parallel  component. Adaptive by default.</p>\n',
    )
    layout: Optional[str] = Field(
        'horizontal',
        description='\n\n<p>Layout modes, whose optional values are:</p>\n<ul>\n<li><p><code class="codespan">&#39;horizontal&#39;</code>: place each axis horizontally.</p>\n</li>\n<li><p><code class="codespan">&#39;vertical&#39;</code>: place each axis vertically.</p>\n</li>\n</ul>\n',
    )
    axisExpandable: Optional[bool] = Field(
        False,
        description='\n\n\n\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href="#parallel.axisExpandable">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=map-parallel-prices&edit=1&reset=1" width="600" height="460"></iframe>\n\n\n\n\n\n\n<p>Whether to enable toggling axis on clicking.</p>\n',
    )
    axisExpandCenter: Optional[float] = Field(
        None,
        description='\n\n<p>Index of the axis which is used as the center of expanding initially. It doesn&#39;t have a default value, and needs to be assigned manually.</p>\n<p>Please refer to <a href="parallel.axisExpandable" target="_blank">parallel.axisExpandable</a> for more information.</p>\n',
    )
    axisExpandCount: Optional[float] = Field(
        0,
        description='\n\n<p>Defines how many axes are at expanding state initially. We&#39;d suggest you assign this value manually according to dimensions.</p>\n<p>Please refer to <a href="parallel.axisExpandCenter" target="_blank">parallel.axisExpandCenter</a> and <a href="parallel.axisExpandable" target="_blank">parallel.axisExpandable</a>.</p>\n',
    )
    axisExpandWidth: Optional[float] = Field(
        50,
        description='\n\n<p>Distance between two axes when at expanding state, in pixels.</p>\n<p>Please refer to <a href="parallel.axisExpandable" target="_blank">parallel.axisExpandable</a> for more information.</p>\n',
    )
    axisExpandTriggerOn: Optional[str] = Field(
        'click',
        description='\n\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;click&#39;</code>: Trigger expanding when mouse clicking.</li>\n<li><code class="codespan">&#39;mousemove&#39;</code>: Trigger expanding when mouse hovering.</li>\n</ul>\n',
    )
    parallelAxisDefault: Optional[ParallelAxisDefault] = Field(
        None,
        description='<p>When configuring multiple <a href="#parallelAxis">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> will be merged into <a href="#parallelAxis">parallelAxis</a> to generate the final axis configuration.</p>\n<p><a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/parallel-all&amp;edit=1&amp;reset=1" target="_blank">See the sample</a>.</p>\n<p><br></p>\n',
    )


class AreaSelectStyle(BaseModel):
    """
        <p>Area selecting is available on axes. Here is some configurations.</p>
    <p><br></p>

    """

    width: Optional[float] = Field(
        20, description='\n\n<p>Width of selecting box.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        1, description='\n\n<p>Border width of the select box.</p>\n'
    )
    borderColor: Optional[Any] = Field(
        'rgba(160,197,232)', description='\n\n<p>Border color of the select box.</p>\n'
    )
    color: Optional[Any] = Field(
        'rgba(160,197,232)',
        description='\n\n<p>Border fill color of the select box.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.3, description='\n\n<p>Opacity of the select box.</p>\n'
    )


class _StyleName29(_StyleName5):
    pass


class Rich29(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName29] = Field(
        None, alias='<style_name>', description=''
    )


class NameTextStyle4(BaseModel):
    """
    <p>Text style of axis name.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Color of axis name uses <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>axis name font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich29] = Field(
        None,
        description='<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',
    )


class LineStyle38(LineStyle3):
    pass


class AxisLine6(BaseModel):
    """
    <p>Settings related to axis line.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis line from showing.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'none',
        description='\n\n<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class="codespan">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class="codespan">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class="codespan">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n',
    )
    symbolSize: Optional[Any] = Field(
        '[10, 15]',
        description='\n\n<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n',
    )
    symbolOffset: Optional[Union[Any, float]] = Field(
        '[0, 0]',
        description='\n\n<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n',
    )
    lineStyle: Optional[LineStyle38] = Field(None, description='')


class LineStyle39(LineStyle36):
    """
    <p>Line style of axis ticks.</p>

    """

    pass


class AxisTick6(BaseModel):
    """
    <p>Settings related to axis tick.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis tick from showing.</p>\n',
    )
    alignWithLabel: Optional[bool] = Field(
        False,
        description='\n\n<p>Align axis tick with label, which is available only when <code class="codespan">boundaryGap</code> is set to be <code class="codespan">true</code> in category axis. See the following picture:</p>\n<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href="#parallelAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    length: Optional[float] = Field(
        5, description='\n\n<p>The length of the axis tick.</p>\n'
    )
    lineStyle: Optional[LineStyle39] = Field(
        None, description='<p>Line style of axis ticks.</p>\n'
    )


class LineStyle40(LineStyle37):
    pass


class MinorTick5(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Settings related minor ticks.</p>
    <p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>
    <p>Examples:</p>
    <p>1) Using minor ticks in function plotting.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>


    <p>2) Using minor ticks in log axis.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>


    """

    show: Optional[bool] = Field(False, description='\n\n<p>If show minor ticks.</p>\n')
    splitNumber: Optional[float] = Field(
        5, description='\n\n<p>Number of interval splited by minor ticks.</p>\n'
    )
    length: Optional[float] = Field(
        3, description='\n\n<p>Length of minor ticks lines。</p>\n'
    )
    lineStyle: Optional[LineStyle40] = Field(None, description='')


class _StyleName30(_StyleName5):
    pass


class Rich30(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName30] = Field(
        None, alias='<style_name>', description=''
    )


class AxisLabel6(BaseModel):
    """
    <p>Settings related to axis label.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis label from appearing.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    rotate: Optional[float] = Field(
        0,
        description='\n\n<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n',
    )
    margin: Optional[float] = Field(
        8,
        description='\n\n<p>The margin between the axis label and the axis line.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    showMinLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the min tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n',
    )
    showMaxLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the max tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n',
    )
    hideOverlap: Optional[bool] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>Whether to hide overlapped labels.</p>\n',
    )
    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p>Color of axis label is set to be <a href="#parallelAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class="lang-ts">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class="lang-ts">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich30] = Field(
        None,
        description='<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',
    )


class _StyleName31(_StyleName):
    pass


class Rich31(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName31] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle15(BaseModel):
    """
    <p>Text style of the category.</p>

    """

    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich31] = Field(
        None,
        description='<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',
    )


class Datum6(BaseModel):
    value: Optional[str] = Field(None, description='<p>Name of a category.</p>\n')
    textStyle: Optional[TextStyle15] = Field(
        None, description='<p>Text style of the category.</p>\n'
    )


class ParallelAxis(BaseModel):
    """
        <p>This component is the coordinate axis for parallel coordinate.</p>
    <p><strong>Introduction about Parallel coordinates</strong></p>
    <p><a href="https://en.wikipedia.org/wiki/Parallel_coordinates" target="_blank">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>
    <p>For example, <a href="#series-parallel.data">series-parallel.data</a> is the following data:</p>
    <pre><code class="lang-javascript">[
        [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],
        [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],
        [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],
        [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],
        { // Data item can also be an Object, so that perticular settings of its line can be set here.
            value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]
            lineStyle: {...},
        }
        ...
    ]
    </code></pre>
    <p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>
    <p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/parallel-all&edit=1&reset=1" width="600" height="400"></iframe>



    <p><strong>Brief about Configuration</strong></p>
    <p>Basic configuration parallel coordinates is shown as follow:</p>
    <pre><code class="lang-javascript">option = {
        parallelAxis: [                     // Definitions of axes.
            {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.
            {dim: 1, name: schema[1].text},
            {dim: 2, name: schema[2].text},
            {dim: 3, name: schema[3].text},
            {dim: 4, name: schema[4].text},
            {dim: 5, name: schema[5].text},
            {dim: 6, name: schema[6].text},
            {dim: 7, name: schema[7].text,
                type: &#39;category&#39;,           // Also supports category data.
                data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]
            }
        ],
        parallel: {                         // Definition of a parallel coordinate system.
            left: &#39;5%&#39;,                     // Location of parallel coordinate system.
            right: &#39;13%&#39;,
            bottom: &#39;10%&#39;,
            top: &#39;20%&#39;,
            parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.
                type: &#39;value&#39;,
                nameLocation: &#39;end&#39;,
                nameGap: 20
            }
        },
        series: [                           // Here the three series sharing the same parallel coordinate system.
            {
                name: &#39;Beijing&#39;,
                type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;
                data: [
                    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],
                    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],
                    ...
                ]
            },
            {
                name: &#39;Shanghai&#39;,
                type: &#39;parallel&#39;,
                data: [
                    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],
                    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],
                    ...
                ]
            },
            {
                name: &#39;Guangzhou&#39;,
                type: &#39;parallel&#39;,
                data: [
                    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],
                    [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],
                    ...
                ]
            }
        ]
    };
    </code></pre>
    <p>Three components are involved here: <a href="#parallel">parallel</a>, <a href="#parallelAxis">parallelAxis</a>, <a href="#series-parallel">series-parallel</a></p>
    <ul>
    <li><p><a href="#parallel">parallel</a></p>
    <p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>
    <p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>
    <p>  Position setting is also carried out here.</p>
    </li>
    <li><p><a href="#parallelAxis">parallelAxis</a></p>
    <p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>
    <p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>
    </li>
    <li><p><a href="#series-parallel">series-parallel</a></p>
    <p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>
    <p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>
    </li>
    </ul>
    <p><strong>Notes and Best Practices</strong></p>
    <p>When configuring multiple <a href="#parallelAxis">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> will be merged into <a href="#parallelAxis">parallelAxis</a> to generate the final axis configuration.</p>
    <p><strong>If data is too large and cause bad performance</strong></p>
    <p>It is suggested to set <a href="#series-parallel.lineStyle.width">series-parallel.lineStyle.width</a> to be <code class="codespan">0.5</code> (or less), which may improve performance significantly.</p>
    <p><strong>Display High-Dimension Data</strong></p>
    <p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>
    <p>In this case, you may use <a href="#parallel.axisExpandable">parallel.axisExpandable</a> to improve the display. See this example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=map-parallel-prices&edit=1&reset=1" width="600" height="460"></iframe>










    <p><br>
    <br></p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    dim: Optional[float] = Field(
        None,
        description='<p>Dimension index of coordinate axis.</p>\n<p>For example, <a href="#series-parallel.data">series-parallel.data</a> is the following data:</p>\n<pre><code class="lang-javascript">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p><code class="codespan">dim</code> defines which dimension (which <em>row</em>) of data would map to this axis.</p>\n<p>Started from <code class="codespan">0</code>. For example, if the <code class="codespan">dim</code> of coordinate axis is <code class="codespan">1</code>, it indicates that the second row of data would map to this axis.</p>\n',
    )
    parallelIndex: Optional[float] = Field(
        0,
        description='<p>It is used to define which <em>coordinate</em> the <em>axis</em> should map to.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">myChart.setOption({\n    parallel: [\n        {...},                      // the first parallel coordinate\n        {...}                       // the second parallel coordinate\n    ],\n    parallelAxis: [\n        {parallelIndex: 1, ...},    // the first coordinate axis, mapping to the second parallel coordinate\n        {parallelIndex: 0, ...},    //  the second coordinate axis, mapping to the first parallel coordinate\n        {parallelIndex: 1, ...},    //  the third coordinate axis, mapping to the second parallel coordinate\n        {parallelIndex: 0, ...}     //  the fourth coordinate axis, mapping to the first parallel coordinate\n    ],\n    ...\n});\n</code></pre>\n<p>If there is only one parallel coordinate, you don&#39;t have to configure it, whose default value is <code class="codespan">0</code>.</p>\n',
    )
    realtime: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to refresh view when brush-selecting axis. If is set to be <code class="codespan">false</code>, view is updated after brush-selecting action ends.</p>\n<p>When data amount is large, it is suggested to set to be <code class="codespan">false</code> to avoid efficiency problems.</p>\n',
    )
    areaSelectStyle: Optional[AreaSelectStyle] = Field(
        None,
        description='<p>Area selecting is available on axes. Here is some configurations.</p>\n<p><br></p>\n',
    )
    type: Optional[str] = Field(
        'value',
        description='<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class="codespan">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class="codespan">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href="#series.data">series.data</a> or <a href="#dataset.source">dataset.source</a>, or can be specified via <a href="#parallelAxis.data">parallelAxis.data</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class="codespan">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n',
    )
    name: Optional[str] = Field(None, description='\n\n<p>Name of axis.</p>\n')
    nameLocation: Optional[str] = Field(
        'end',
        description='\n\n<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class="codespan">&#39;start&#39;</code></li>\n<li><code class="codespan">&#39;middle&#39;</code> or <code class="codespan">&#39;center&#39;</code></li>\n<li><code class="codespan">&#39;end&#39;</code></li>\n</ul>\n',
    )
    nameTextStyle: Optional[NameTextStyle4] = Field(
        None, description='<p>Text style of axis name.</p>\n'
    )
    nameGap: Optional[float] = Field(
        15, description='\n\n<p>Gap between axis name and axis line.</p>\n'
    )
    nameRotate: Optional[float] = Field(
        None, description='\n\n<p>Rotation of axis name.</p>\n'
    )
    inverse: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n',
    )
    boundaryGap: Optional[Union[bool, Any]] = Field(
        None,
        description='\n\n<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class="codespan">boundaryGap</code> of category axis can be set to either <code class="codespan">true</code> or <code class="codespan">false</code>. Default value is set to be <code class="codespan">true</code>, in which case <a href="#parallelAxis.axisTick">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href="#parallelAxis.axisTick">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class="codespan">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href="#parallelAxis.min">min</a> and <a href="#parallelAxis.max">max</a>.\n<strong>Example: </strong></p>\n<pre><code class="lang-ts">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n',
    )
    min: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class="lang-ts">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the min value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated min value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    max: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class="lang-ts">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the max value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated max value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    scale: Optional[bool] = Field(
        False,
        description='\n\n<p>It is available only in numerical axis, i.e., <a href="#parallelAxis.type">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class="codespan">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href="#parallelAxis.min">min</a> and <a href="#parallelAxis.max">max</a> are set.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        5,
        description='\n\n<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n',
    )
    minInterval: Optional[float] = Field(
        0,
        description='\n\n<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class="codespan">1</code> to make sure axis label is show as integer.</p>\n<pre><code class="lang-ts">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href="#parallelAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    maxInterval: Optional[float] = Field(
        None,
        description='\n\n<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href="#parallelAxis.type">type</a> is &#39;time&#39;), it can be set to be <code class="codespan">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class="lang-ts">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href="#parallelAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    interval: Optional[float] = Field(
        None,
        description='\n\n<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href="#parallelAxis.splitNumber">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href="#parallelAxis.min">min</a> and <a href="#parallelAxis.max">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href="#parallelAxis.type">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href="#parallelAxis.type">type</a>: &#39;log&#39; axis.</p>\n',
    )
    logBase: Optional[float] = Field(
        10,
        description='\n\n<p>Base of logarithm, which is valid only for numeric axes with <a href="#parallelAxis.type">type</a>: &#39;log&#39;.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code>, to prevent interaction with the axis.</p>\n',
    )
    triggerEvent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class="lang-ts">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n',
    )
    axisLine: Optional[AxisLine6] = Field(
        None, description='<p>Settings related to axis line.</p>\n'
    )
    axisTick: Optional[AxisTick6] = Field(
        None, description='<p>Settings related to axis tick.</p>\n'
    )
    minorTick: Optional[MinorTick5] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>\n\n',
    )
    axisLabel: Optional[AxisLabel6] = Field(
        None, description='<p>Settings related to axis label.</p>\n'
    )
    data: Optional[List[Datum6]] = Field(
        None,
        description='<p>Category data, available in <a href="#parallelAxis.type">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href="#parallelAxis.type">type</a> is not specified, but <code class="codespan">axis.data</code> is specified, the <a href="#parallelAxis.type">type</a> is auto set as <code class="codespan">&#39;category&#39;</code>.</p>\n<p>If <a href="#parallelAxis.type">type</a> is specified as <code class="codespan">&#39;category&#39;</code>, but <code class="codespan">axis.data</code> is not specified, <code class="codespan">axis.data</code> will be auto collected from <a href="#series.data">series.data</a>. It brings convenience, but we should notice that <code class="codespan">axis.data</code> provides then value range of the <code class="codespan">&#39;category&#39;</code> axis. If  it is auto collected from <a href="#series.data">series.data</a>, Only the values appearing in <a href="#series.data">series.data</a> can be collected. For example, if <a href="#series.data">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n',
    )


class _StyleName32(_StyleName5):
    pass


class Rich32(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName32] = Field(
        None, alias='<style_name>', description=''
    )


class NameTextStyle5(BaseModel):
    """
    <p>Text style of axis name.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Color of axis name uses <a href="#singleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>axis name 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>axis name font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>axis name font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich32] = Field(
        None,
        description='<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',
    )


class LineStyle41(LineStyle3):
    pass


class AxisLine7(BaseModel):
    """
    <p>Settings related to axis line.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis line from showing.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'none',
        description='\n\n<p>Symbol of the two ends of the axis. It could be a string, representing the same symbol for two ends; or an array with two string elements, representing the two ends separately. It&#39;s set to be <code class="codespan">&#39;none&#39;</code> by default, meaning no arrow for either end. If it is set to be <code class="codespan">&#39;arrow&#39;</code>, there shall be two arrows. If there should only one arrow at the end, it should set to be <code class="codespan">[&#39;none&#39;, &#39;arrow&#39;]</code>.</p>\n',
    )
    symbolSize: Optional[Any] = Field(
        '[10, 15]',
        description='\n\n<p>Size of the arrows at two ends. The first is the width perpendicular to the axis, the next is the width parallel to the axis.</p>\n',
    )
    symbolOffset: Optional[Union[Any, float]] = Field(
        '[0, 0]',
        description='\n\n<p>Arrow offset of axis. If is array, the first number is the offset of the arrow at the beginning, and the second number is the offset of the arrow at the end. If is number, it means the arrows have the same offset.</p>\n',
    )
    lineStyle: Optional[LineStyle41] = Field(None, description='')


class LineStyle42(BaseModel):
    """
    <p>Line style of axis ticks.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='<p>Color of axis label is set to be <a href="#singleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default.</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>axisTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class AxisTick7(BaseModel):
    """
    <p>Settings related to axis tick.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis tick from showing.</p>\n',
    )
    alignWithLabel: Optional[bool] = Field(
        False,
        description='\n\n<p>Align axis tick with label, which is available only when <code class="codespan">boundaryGap</code> is set to be <code class="codespan">true</code> in category axis. See the following picture:</p>\n<p><img width="600" height="auto" src="documents/asset/img/axis-align-with-label.png"></p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of axisTick, which is available in category axis.  is set to be the same as <a href="#singleAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    length: Optional[float] = Field(
        5, description='\n\n<p>The length of the axis tick.</p>\n'
    )
    lineStyle: Optional[LineStyle42] = Field(
        None, description='<p>Line style of axis ticks.</p>\n'
    )


class LineStyle43(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Style configuration of minor ticks lines <a href="#singleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a>。</p>\n',
    )
    width: Optional[float] = Field(1, description='\n\n<p>minorTick line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class MinorTick6(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Settings related minor ticks.</p>
    <p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>
    <p>Examples:</p>
    <p>1) Using minor ticks in function plotting.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>


    <p>2) Using minor ticks in log axis.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>


    """

    show: Optional[bool] = Field(False, description='\n\n<p>If show minor ticks.</p>\n')
    splitNumber: Optional[float] = Field(
        5, description='\n\n<p>Number of interval splited by minor ticks.</p>\n'
    )
    length: Optional[float] = Field(
        3, description='\n\n<p>Length of minor ticks lines。</p>\n'
    )
    lineStyle: Optional[LineStyle43] = Field(None, description='')


class _StyleName33(_StyleName5):
    pass


class Rich33(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName33] = Field(
        None, alias='<style_name>', description=''
    )


class AxisLabel7(BaseModel):
    """
    <p>Settings related to axis label.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the axis label from appearing.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis label, which is available in category axis. </p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    inside: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> so the axis labels face the <code class="codespan">inside</code> direction.</p>\n',
    )
    rotate: Optional[float] = Field(
        0,
        description='\n\n<p>Rotation degree of axis label, which is especially useful when there is no enough space for category axis.</p>\n<p>Rotation degree is from -90 to 90.</p>\n',
    )
    margin: Optional[float] = Field(
        8,
        description='\n\n<p>The margin between the axis label and the axis line.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    showMinLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the min tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the min tick will not be displayed.</p>\n',
    )
    showMaxLabel: Optional[bool] = Field(
        None,
        description='\n\n<p>Whether to show the label of the max tick. Optional values: <code class="codespan">true</code>, <code class="codespan">false</code>, <code class="codespan">null</code>. It is auto determined by default, that is, if labels are overlapped, the label of the max tick will not be displayed.</p>\n',
    )
    hideOverlap: Optional[bool] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>Whether to hide overlapped labels.</p>\n',
    )
    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p>Color of axis label is set to be <a href="#singleAxis.axisLine.lineStyle.color">axisLine.lineStyle.color</a> by default. Callback function is supported, in the following format:</p>\n<pre><code class="lang-ts">(val: string) =&gt; Color\n</code></pre>\n<p>Parameter is the text of label, and return value is the color. See the following example:</p>\n<pre><code class="lang-ts">textStyle: {\n    color: function (value, index) {\n        return value &gt;= 0 ? &#39;green&#39; : &#39;red&#39;;\n    }\n}\n</code></pre>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich33] = Field(
        None,
        description='<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',
    )


class LineStyle44(LineStyle6):
    pass


class SplitLine5(BaseModel):
    """
    <p>Split line of axis in <a href="#grid">grid</a> area.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the splitLine from showing.\n<code class="codespan">value</code> type axes are shown by default, while <code class="codespan">category</code> type axes are hidden.</p>\n',
    )
    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitLine, which is available in category axis.  is set to be the same as <a href="#singleAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    lineStyle: Optional[LineStyle44] = Field(None, description='')


class LineStyle45(LineStyle7):
    pass


class MinorSplitLine4(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.6.0</code></p>
    </blockquote>
    <p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#singleAxis.minorTick">minorTick</a></p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>If show minor split lines.</p>\n'
    )
    lineStyle: Optional[LineStyle45] = Field(None, description='')


class AreaStyle7(AreaStyle):
    """
    <p>Split area style.</p>

    """

    pass


class SplitArea5(BaseModel):
    """
    <p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>

    """

    interval: Optional[Union[float, Any]] = Field(
        'auto',
        description='\n\n\n\n<p>Interval of Axis splitArea, which is available in category axis.  is set to be the same as <a href="#singleAxis.axisLabel.interval">axisLabel.interval</a> by default.</p>\n<p>It uses a strategy that labels do not overlap by default.</p>\n<p>You may set it to be 0 to display all labels compulsively.</p>\n<p>If it is set to be 1, it means that labels are shown once after one label. And if it is set to be 2, it means labels are shown once after two labels, and so on.</p>\n<p>On the other hand, you can control by callback function, whose format is shown below:</p>\n<pre><code class="lang-ts">(index:number, value: string) =&gt; boolean\n</code></pre>\n<p>The first parameter is index of category, and the second parameter is the name of category. The return values decides whether to display label.</p>\n',
    )
    show: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to show the splitArea.</p>\n',
    )
    areaStyle: Optional[AreaStyle7] = Field(
        None, description='<p>Split area style.</p>\n'
    )


class _StyleName34(_StyleName):
    pass


class Rich34(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName34] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle16(BaseModel):
    """
    <p>Text style of the category.</p>

    """

    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich34] = Field(
        None,
        description='<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',
    )


class Datum7(BaseModel):
    value: Optional[str] = Field(None, description='<p>Name of a category.</p>\n')
    textStyle: Optional[TextStyle16] = Field(
        None, description='<p>Text style of the category.</p>\n'
    )


class Label16(Label):
    """
    <p>label of axisPointer</p>

    """

    pass


class LineStyle46(LineStyle2):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    pass


class ShadowStyle8(ShadowStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    pass


class Handle5(Handle):
    """
    <p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>

    """

    pass


class AxisPointer8(BaseModel):
    """
    <p>axisPointer settings on the axis.</p>

    """

    show: Optional[bool] = Field(
        False,
        description='\n\n<p>axisPointer will not be displayed by default. But if <a href="#tooltip.trigger">tooltip.trigger</a> is set as <code class="codespan">&#39;axis&#39;</code> or <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> is set as  <code class="codespan">&#39;cross&#39;</code>, axisPointer will be displayed automatically. Each coordinate system will automatically chose the axes whose will display its axisPointer. <a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.</p>\n',
    )
    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n</ul>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label16] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle46] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle8] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    triggerTooltip: Optional[bool] = Field(
        True, description='\n\n<p>Whether to trigger tooltip.</p>\n'
    )
    value: Optional[float] = Field(
        None,
        description='<p>current value. When using <a href="xAxisPointer.handle" target="_blank">axisPointer.handle</a>, <code class="codespan">value</code> can be set to define the initial position of axisPointer.</p>\n',
    )
    status: Optional[bool] = Field(
        None,
        description='\n\n<p>Current status, can be <code class="codespan">&#39;show&#39;</code> 和 <code class="codespan">&#39;hide&#39;</code>.</p>\n',
    )
    handle: Optional[Handle5] = Field(
        None,
        description='<p>A button used to drag axisPointer. This feature is applicable in touch device. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )


class Label17(Label):
    """
    <p>label of axisPointer</p>

    """

    pass


class LineStyle47(LineStyle2):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>

    """

    pass


class ShadowStyle9(ShadowStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>

    """

    pass


class CrossStyle3(CrossStyle):
    """
    <p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;cross&#39;</code>.</p>

    """

    pass


class AxisPointer9(BaseModel):
    """
        <p>Configuration item for axisPointer.</p>
    <p><code class="codespan">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href="#xAxis.axisPointer">xAxis.axisPointer</a> or <a href="#angleAxis.axisPointer">angleAxis.axisPointer</a>). More detailed features can be configured on <code class="codespan">someAxis.axisPointer</code>. But in common cases, using <code class="codespan">tooltip.axisPointer</code> is more convenient.</p>
    <blockquote>
    <p><strong>Notice:</strong> configurations of <code class="codespan">tooltip.axisPointer</code> has lower priority than that of <code class="codespan">someAxis.axisPointer</code>.</p>
    </blockquote>
    <hr>
    <p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>
    <p>For example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>


    <p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>
    <p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>


    <p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>

    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>



    <hr>
    <blockquote>
    <p><strong>Notice:</strong>
    Generally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>
    </blockquote>
    <blockquote>
    <p>But these configurations can only be configured in global axisPointer:
    <a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>
    </blockquote>
    <hr>
    <hr>
    <p><strong>How to display axisPointer:</strong></p>
    <p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>
    <p>Those axisPointer will not be displayed by default, utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to display the label of axisPointer:</strong></p>
    <p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>
    <ul>
    <li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>
    </li>
    <li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>
    </li>
    </ul>
    <hr>
    <p><strong>How to configure axisPointer on touch device:</strong></p>
    <p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>
    <p><strong>Notice:</strong>
    If tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>
    <p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>
    <hr>
    <p><strong>Snap to point</strong></p>
    <p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>
    <hr>

    """

    type: Optional[str] = Field(
        'line',
        description='\n\n<p>Indicator type.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;line&#39;</code> line indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;shadow&#39;</code> shadow crosshair indicator.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code> no indicator displayed.</p>\n</li>\n<li><p><code class="codespan">&#39;cross&#39;</code> crosshair indicator, which is actually the shortcut of enable two axisPointers of two orthometric axes.</p>\n</li>\n</ul>\n',
    )
    axis: Optional[str] = Field(
        'auto',
        description='<p>The coordinate axis, which could be <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, or <code class="codespan">&#39;angle&#39;</code>. By default, each coordinate system will automatically chose the axes whose will display its axisPointer (category axis or time axis is used by default).</p>\n',
    )
    snap: Optional[bool] = Field(
        None,
        description='<p>Whether snap to point automatically. The default value is auto determined.</p>\n<p>This feature usually makes sense in value axis and time axis, where tiny points can be seeked automatically.</p>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>z value, 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',
    )
    label: Optional[Label17] = Field(None, description='<p>label of axisPointer</p>\n')
    lineStyle: Optional[LineStyle47] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;line&#39;</code>.</p>\n',
    )
    shadowStyle: Optional[ShadowStyle9] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;shadow&#39;</code>.</p>\n',
    )
    crossStyle: Optional[CrossStyle3] = Field(
        None,
        description='<p>It is valid when <a href="#tooltip.axisPointer.type">axisPointer.type</a> is <code class="codespan">&#39;cross&#39;</code>.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        200,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'exponentialOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class TextStyle17(TextStyle2):
    """
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip5(BaseModel):
    """
        <p>tooltip settings in the coordinate system component.</p>
    <p><strong>General Introduction:</strong></p>
    <p>tooltip can be configured on different places:</p>
    <ul>
    <li><p>Configured on global: <a href="#tooltip">tooltip</a></p>
    </li>
    <li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>
    </li>
    <li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>
    </li>
    <li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>
    </li>
    </ul>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show the tooltip component.</p>\n<p>including tooltip floating layer and <a href="#tooltip.axisPointer">axisPointer</a>.</p>\n',
    )
    trigger: Optional[str] = Field(
        'item',
        description='\n\n<p>Type of triggering.</p>\n<p>Options:</p>\n<ul>\n<li><p><code class="codespan">&#39;item&#39;</code></p>\n<p>  Triggered by data item, which is mainly used for charts that don&#39;t have a category axis like scatter charts or pie charts.</p>\n</li>\n<li><p><code class="codespan">&#39;axis&#39;</code></p>\n<p>  Triggered by axes, which is mainly used for charts that have category axes, like bar charts or line charts.</p>\n<p> ECharts 2.x only supports axis trigger for category axis. In ECharts 3, it is supported for all types of axes in <a href="#grid">grid</a> or <a href="#polar">polar</a>. Also, you may assign axis with <a href="#tooltip.axisPointer.axis">axisPointer.axis</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;none&#39;</code></p>\n<p>  Trigger nothing.</p>\n</li>\n</ul>\n',
    )
    axisPointer: Optional[AxisPointer9] = Field(
        None,
        description='<p>Configuration item for axisPointer.</p>\n<p><code class="codespan">tooltip.axisPointer</code> is like syntactic sugar of axisPointer settings on axes (for example, <a href="#xAxis.axisPointer">xAxis.axisPointer</a> or <a href="#angleAxis.axisPointer">angleAxis.axisPointer</a>). More detailed features can be configured on <code class="codespan">someAxis.axisPointer</code>. But in common cases, using <code class="codespan">tooltip.axisPointer</code> is more convenient.</p>\n<blockquote>\n<p><strong>Notice:</strong> configurations of <code class="codespan">tooltip.axisPointer</code> has lower priority than that of <code class="codespan">someAxis.axisPointer</code>.</p>\n</blockquote>\n<hr>\n<p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>\n\n\n<p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n',
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The position of the tooltip&#39;s floating layer, which would follow the position of mouse by default.</p>\n<p>Options:</p>\n<ul>\n<li><p><code 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The content formatter of tooltip&#39;s floating layer which supports string template and callback function.</p>\n<p><strong>1. String template</strong></p>\n<p>The template variables are <code 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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<p>The background color of tooltip&#39;s floating layer.</p>\n',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\n\n\n\n\n\n\n\n\n\n<p>The border color of tooltip&#39;s floating layer.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n\n\n\n\n\n\n\n\n<p>The border width of tooltip&#39;s floating layer.</p>\n',
    )
    padding: Optional[float] = Field(
        5,
        description='\n\n\n\n\n\n\n\n\n\n\n\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',
    )
    textStyle: Optional[TextStyle17] = Field(
        None, description='<p>The text syle of tooltip&#39;s floating layer.</p>\n'
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\n\n\n\n\n\n\n\n\n\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',
    )


class SingleAxis(BaseModel):
    """
        <p>An axis with a single dimension. It can be used to display data in one dimension. For example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=scatter-single-axis&edit=1&reset=1" width="700" height="500"></iframe>




    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between single component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between single component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between single component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between single component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        'auto', description='<p>Width of single component. Adaptive by default.</p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        'auto', description='<p>Height of single component. Adaptive by default.</p>\n'
    )
    orient: Optional[str] = Field(
        'horizontal',
        description='<p>Orientation of the axis. By default, it&#39;s <code class="codespan">&#39;horizontal&#39;</code>. You can set it to be <code class="codespan">&#39;vertical&#39;</code> to make a vertical axis.</p>\n',
    )
    type: Optional[str] = Field(
        'value',
        description='<p>Type of axis.</p>\n<p>Option:</p>\n<ul>\n<li><p><code class="codespan">&#39;value&#39;</code>\n  Numerical axis, suitable for continuous data.</p>\n</li>\n<li><p><code class="codespan">&#39;category&#39;</code>\n  Category axis, suitable for discrete category data. Category data can be auto retrieved from <a href="#series.data">series.data</a> or <a href="#dataset.source">dataset.source</a>, or can be specified via <a href="#singleAxis.data">singleAxis.data</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;time&#39;</code>\n  Time axis, suitable for continuous time series data. As compared to value axis, it has a better formatting for time and a different tick calculation method. For example, it decides to use month, week, day or hour for tick based on the range of span.</p>\n</li>\n<li><p><code class="codespan">&#39;log&#39;</code>\n  Log axis, suitable for log data.</p>\n</li>\n</ul>\n',
    )
    name: Optional[str] = Field(None, description='\n\n<p>Name of axis.</p>\n')
    nameLocation: Optional[str] = Field(
        'end',
        description='\n\n<p>Location of axis name.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class="codespan">&#39;start&#39;</code></li>\n<li><code class="codespan">&#39;middle&#39;</code> or <code class="codespan">&#39;center&#39;</code></li>\n<li><code class="codespan">&#39;end&#39;</code></li>\n</ul>\n',
    )
    nameTextStyle: Optional[NameTextStyle5] = Field(
        None, description='<p>Text style of axis name.</p>\n'
    )
    nameGap: Optional[float] = Field(
        15, description='\n\n<p>Gap between axis name and axis line.</p>\n'
    )
    nameRotate: Optional[float] = Field(
        None, description='\n\n<p>Rotation of axis name.</p>\n'
    )
    inverse: Optional[bool] = Field(
        False,
        description='\n\n<p>Set this to <code class="codespan">true</code> to invert the axis.\nThis is a new option available from Echarts 3 and newer.</p>\n',
    )
    boundaryGap: Optional[Union[bool, Any]] = Field(
        None,
        description='\n\n<p>The boundary gap on both sides of a coordinate axis. The setting and behavior of category axes and non-category axes are different.</p>\n<p>The <code class="codespan">boundaryGap</code> of category axis can be set to either <code class="codespan">true</code> or <code class="codespan">false</code>. Default value is set to be <code class="codespan">true</code>, in which case <a href="#singleAxis.axisTick">axisTick</a> is served only as a separation line, and labels and data appear only in the center part of two <a href="#singleAxis.axisTick">axis ticks</a>, which is called <em>band</em>.</p>\n<p>For non-category axis, including time, numerical value, and log axes, <code class="codespan">boundaryGap</code> is an array of two values, representing the spanning range between minimum and maximum value. The value can be set in numeric value or relative percentage, which becomes invalid after setting <a href="#singleAxis.min">min</a> and <a href="#singleAxis.max">max</a>.\n<strong>Example: </strong></p>\n<pre><code class="lang-ts">boundaryGap: [&#39;20%&#39;, &#39;20%&#39;]\n</code></pre>\n',
    )
    min: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The minimun value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMin&#39;</code> so that the minimum value on this axis is set to be the minimum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">min</code> is specified as a function, it should return a min value, like:</p>\n<pre><code class="lang-ts">min: function (value) {\n    return value.min - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the min value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated min value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    max: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n<p>The maximum value of axis.</p>\n<p>It can be set to a special value <code class="codespan">&#39;dataMax&#39;</code> so that the minimum value on this axis is set to be the maximum label.</p>\n<p>It will be automatically computed to make sure axis tick is equally distributed when not set.</p>\n<p>In category axis, it can also be set as the ordinal number. For example, if a catergory axis has <code class="codespan">data: [&#39;categoryA&#39;, &#39;categoryB&#39;, &#39;categoryC&#39;]</code>, and the ordinal <code class="codespan">2</code> represents <code class="codespan">&#39;categoryC&#39;</code>. Moreover, it can be set as negative number, like <code class="codespan">-3</code>.</p>\n<p>If <code class="codespan">max</code> is specified as a function, it should return a max value, like:</p>\n<pre><code class="lang-ts">max: function (value) {\n    return value.max - 20;\n}\n</code></pre>\n<p><code class="codespan">value</code> is an object, containing the <code class="codespan">min</code> value and <code class="codespan">max</code> value of the data. This function should return the max value of axis, or return <code class="codespan">null</code>/<code class="codespan">undefined</code> to make echarts use the auto calculated max value (<code class="codespan">null</code>/<code class="codespan">undefined</code> return is only supported since <code class="codespan">v4.8.0</code>).</p>\n',
    )
    scale: Optional[bool] = Field(
        False,
        description='\n\n<p>It is available only in numerical axis, i.e., <a href="#singleAxis.type">type</a>: &#39;value&#39;.</p>\n<p>It specifies whether not to contain zero position of axis compulsively. When it is set to be <code class="codespan">true</code>, the axis may not contain zero position, which is useful in the scatter chart for both value axes.</p>\n<p>This configuration item is unavailable when the <a href="#singleAxis.min">min</a> and <a href="#singleAxis.max">max</a> are set.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        5,
        description='\n\n<p>Number of segments that the axis is split into. Note that this number serves only as a recommendation, and the true segments may be adjusted based on readability.</p>\n<p>This is unavailable for category axis.</p>\n',
    )
    minInterval: Optional[float] = Field(
        0,
        description='\n\n<p>Minimum gap between split lines.</p>\n<p>For example, it can be set to be <code class="codespan">1</code> to make sure axis label is show as integer.</p>\n<pre><code class="lang-ts">{\n    minInterval: 1\n}\n</code></pre>\n<p>It is available only for axis of <a href="#singleAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    maxInterval: Optional[float] = Field(
        None,
        description='\n\n<p>Maximum gap between split lines.</p>\n<p>For example, in time axis (<a href="#singleAxis.type">type</a> is &#39;time&#39;), it can be set to be <code class="codespan">3600 * 24 * 1000</code> to make sure that the gap between axis labels is less than or equal to one day.</p>\n<pre><code class="lang-ts">{\n    maxInterval: 3600 * 1000 * 24\n}\n</code></pre>\n<p>It is available only for axis of <a href="#singleAxis.type">type</a> &#39;value&#39; or &#39;time&#39;.</p>\n',
    )
    interval: Optional[float] = Field(
        None,
        description='\n\n<p>Compulsively set segmentation interval for axis.</p>\n<p>As <a href="#singleAxis.splitNumber">splitNumber</a> is a recommendation value, the calculated tick may not be the same as expected. In this case, interval should be used along with <a href="#singleAxis.min">min</a> and <a href="#singleAxis.max">max</a> to compulsively set tickings. But in most cases, we do not suggest using this, our automatic calculation is enough for most situations.</p>\n<p>This is unavailable for category axis. Timestamp should be passed for <a href="#singleAxis.type">type</a>: &#39;time&#39; axis. Logged value should be passed for <a href="#singleAxis.type">type</a>: &#39;log&#39; axis.</p>\n',
    )
    logBase: Optional[float] = Field(
        10,
        description='\n\n<p>Base of logarithm, which is valid only for numeric axes with <a href="#singleAxis.type">type</a>: &#39;log&#39;.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code>, to prevent interaction with the axis.</p>\n',
    )
    triggerEvent: Optional[bool] = Field(
        False,
        description='<p>Set this to <code class="codespan">true</code> to enable triggering events.</p>\n<p>Parameters of the event include:</p>\n<pre><code class="lang-ts">{\n    // Component type: xAxis, yAxis, radiusAxis, angleAxis\n    // Each of which has an attribute for index, e.g., xAxisIndex for xAxis\n    componentType: string,\n    // Value on axis before being formatted.\n    // Click on value label to trigger event.\n    value: &#39;&#39;,\n    // Name of axis.\n    // Click on laben name to trigger event.\n    name: &#39;&#39;\n}\n</code></pre>\n',
    )
    axisLine: Optional[AxisLine7] = Field(
        None, description='<p>Settings related to axis line.</p>\n'
    )
    axisTick: Optional[AxisTick7] = Field(
        None, description='<p>Settings related to axis tick.</p>\n'
    )
    minorTick: Optional[MinorTick6] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Settings related minor ticks.</p>\n<p>Note: <code class="codespan">minorTick</code> is not available in the <code class="codespan">category</code> type axis.</p>\n<p>Examples:</p>\n<p>1) Using minor ticks in function plotting.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-function&edit=1&reset=1" width="600" height="350"></iframe>\n\n\n<p>2) Using minor ticks in log axis.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-log&edit=1&reset=1" width="600" height="350"></iframe>\n\n',
    )
    axisLabel: Optional[AxisLabel7] = Field(
        None, description='<p>Settings related to axis label.</p>\n'
    )
    splitLine: Optional[SplitLine5] = Field(
        None,
        description='<p>Split line of axis in <a href="#grid">grid</a> area.</p>\n',
    )
    minorSplitLine: Optional[MinorSplitLine4] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.6.0</code></p>\n</blockquote>\n<p>Minor split lines of axis in the <a href="#grid">grid</a> area。It will align to the <a href="#singleAxis.minorTick">minorTick</a></p>\n',
    )
    splitArea: Optional[SplitArea5] = Field(
        None,
        description='<p>Split area of axis in <a href="#grid">grid</a> area, not shown by default.</p>\n',
    )
    data: Optional[List[Datum7]] = Field(
        None,
        description='<p>Category data, available in <a href="#singleAxis.type">type</a>: &#39;category&#39; axis.</p>\n<p>If <a href="#singleAxis.type">type</a> is not specified, but <code class="codespan">axis.data</code> is specified, the <a href="#singleAxis.type">type</a> is auto set as <code class="codespan">&#39;category&#39;</code>.</p>\n<p>If <a href="#singleAxis.type">type</a> is specified as <code class="codespan">&#39;category&#39;</code>, but <code class="codespan">axis.data</code> is not specified, <code class="codespan">axis.data</code> will be auto collected from <a href="#series.data">series.data</a>. It brings convenience, but we should notice that <code class="codespan">axis.data</code> provides then value range of the <code class="codespan">&#39;category&#39;</code> axis. If  it is auto collected from <a href="#series.data">series.data</a>, Only the values appearing in <a href="#series.data">series.data</a> can be collected. For example, if <a href="#series.data">series.data</a> is empty, nothing will be collected.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Name list of all categories\ndata: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n// Each item could also be a specific configuration item.\n// In this case, `value` is used as the category name.\ndata: [{\n    value: &#39;Monday&#39;,\n    // Highlight Monday\n    textStyle: {\n        fontSize: 20,\n        color: &#39;red&#39;\n    }\n}, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;, &#39;Friday&#39;, &#39;Saturday&#39;, &#39;Sunday&#39;]\n</code></pre>\n',
    )
    axisPointer: Optional[AxisPointer8] = Field(
        None, description='<p>axisPointer settings on the axis.</p>\n'
    )
    tooltip: Optional[Tooltip5] = Field(
        None,
        description='<p>tooltip settings in the coordinate system component.</p>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href="#tooltip">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>\n</li>\n</ul>\n',
    )


class LineStyle48(BaseModel):
    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show the axis. It can be set to be <code class="codespan">false</code> to hide the axis line to make a different style.</p>\n',
    )
    color: Optional[Any] = Field(
        '#DAE1F5',
        description='\n\n<p>timeline 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',
    )
    width: Optional[float] = Field(2, description='\n\n<p>timeline  line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName35(_StyleName):
    pass


class Rich35(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName35] = Field(
        None, alias='<style_name>', description=''
    )


class Label18(BaseModel):
    """
    <p>Label axis, <code class="codespan">emphasis</code> is the highlighted style of text. For instance, text style in <code class="codespan">emphasis</code> would be used when mouse hovers or legend connects.</p>

    """

    position: Optional[Union[str, float]] = Field(
        'auto',
        description='\n\n\n\n<p>Configurations:</p>\n<ul>\n<li><p><code class="codespan">&#39;auto&#39;</code>:\n  Automatic layout.</p>\n</li>\n<li><p><code class="codespan">&#39;left&#39;</code>:\n  Put it along the left margin.\n  It is valid when <a href="#timeline.orient">timline.orient</a> is set as <code class="codespan">&#39;horizontal&#39;</code> .</p>\n</li>\n<li><p><code class="codespan">&#39;right&#39;</code>:\n  Put it along the right margin.\n  It is valid when <a href="#timeline.orient">timline.orient</a> is set as <code class="codespan">&#39;horizontal&#39;</code>.</p>\n</li>\n<li><p><code class="codespan">&#39;top&#39;</code>:\n  Put it along the margin of the top.\n  It is valid when <a href="#timeline.orient">timline.orient</a> is set as <code class="codespan">&#39;vertical&#39;</code>.</p>\n</li>\n<li><p><code class="codespan">&#39;bottom&#39;</code>:\n  Put it along the margin of the bottom.\n  It is valid when <a href="#timeline.orient">timline.orient</a> is set as <code class="codespan">&#39;vertical&#39;</code>.</p>\n</li>\n<li><p><code class="codespan">number</code>:\n  When it is assigned to be a a number value, it indicates the distance between <code class="codespan">label</code> and axis. If it is set to be <code class="codespan">0</code> , <code class="codespan">label</code> would be at the same position with axis. Negative value is valid for the other side of the axis.</p>\n</li>\n</ul>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the label.</p>\n'
    )
    interval: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Interval of <code class="codespan">label</code>. When it is assigned with a numerical value, such as  <code class="codespan">2</code>, a label would show every 2 items.</p>\n',
    )
    rotate: Optional[Any] = Field(
        0,
        description='<p>Rotation angle of <code class="codespan">label</code>, in which positive values refer to counter clockwise rotation.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    color: Optional[Any] = Field(
        '#A4B1D7', description='\n\n<p>timeline.lable text color.</p>\n'
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>timeline.lable 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>timeline.lable 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>timeline.lable font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>timeline.lable font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich35] = Field(
        None,
        description='<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',
    )


class ItemStyle10(BaseModel):
    """
    <p>Graphic style of timeline , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Any] = Field(
        '#A4B1D7',
        description='\n\n<p>timeline  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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p>timeline  border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\n\n<p>timeline  border width. No border when it is set to be 0.</p>\n<p>timeline  border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>timeline  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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class CheckpointStyle(BaseModel):
    """
    <p>Style of the selected item (<code class="codespan">checkpoint</code>).</p>

    """

    symbol: Optional[str] = Field(
        'circle',
        description='\n\n<p>Symbol of timeline.checkpointStyle .</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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        13,
        description='\n\n<p>timeline.checkpointStyle  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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate degree of timeline.checkpointStyle  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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Offset of timeline.checkpointStyle  symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code 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',
    )
    color: Optional[Any] = Field(
        '#316bf3',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#fff',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        2,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        2,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'rgba(0, 0, 0, 0.3)',
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        1,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        1,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    animation: Optional[bool] = Field(
        True,
        description='\n\n<p>In <code class="codespan">timeline</code> component, whether there is animation in <code class="codespan">checkpoint</code> moving during the process of <code class="codespan">timeline</code> playing and switching.</p>\n',
    )
    animationDuration: Optional[float] = Field(
        300,
        description='\n\n<p>The animation duration of <code class="codespan">checkpoint</code> in <code class="codespan">timeline</code> component.</p>\n',
    )
    animationEasing: Optional[str] = Field(
        'quinticInOut',
        description='\n\n<p>The easing effect of animation of <code class="codespan">checkpoint</code> in <code class="codespan">timeline</code> component. Refers to <a href="http://localhost/echarts-website/examples/en/view.html?c=line-easing" target="_blank">easing sample</a> for different easing effects.</p>\n',
    )


class ControlStyle(BaseModel):
    """
    <p>The style of <em>control button</em>, which includes: <em>play button</em>, <em>previous button</em>, and <em>next button</em>.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show control button. <code class="codespan">false</code> for hide all.</p>\n',
    )
    showPlayBtn: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show play button.</p>\n'
    )
    showPrevBtn: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show previous button.</p>\n'
    )
    showNextBtn: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show next button.</p>\n'
    )
    itemSize: Optional[float] = Field(
        22, description='\n\n<p>Size of <em>control button</em>, in pixels (px).</p>\n'
    )
    itemGap: Optional[float] = Field(
        12,
        description='\n\n<p>Interval between <em>control button</em>, in pixels (px).</p>\n',
    )
    position: Optional[str] = Field(
        'left',
        description='\n\n<p>the location of <em>control button</em>.</p>\n<ul>\n<li><p>When <a href="#timeline.orient">timeline.orient</a> is set to be <code class="codespan">&#39;horizontal&#39;</code>, <code class="codespan">&#39;left&#39;</code> and <code class="codespan">&#39;right&#39;</code>are valid.</p>\n</li>\n<li><p>When <a href="#timeline.orient">timeline.orient</a> is set to be <code class="codespan">&#39;vertical&#39;</code>, <code class="codespan">&#39;top&#39;</code> and <code class="codespan">&#39;bottom&#39;</code>are valid.</p>\n</li>\n</ul>\n',
    )
    playIcon: Optional[str] = Field(
        None,
        description='\n\n<p>Icon of <em>play status</em> for <em>play button</em>.</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>',
    )
    stopIcon: Optional[str] = Field(
        None,
        description='\n\n<p>Icon of <em>stop status</em> for <em>play button</em>.</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>',
    )
    prevIcon: Optional[str] = Field(
        None,
        description='\n\n<p>Icon of <em>previous button</em>.</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>',
    )
    nextIcon: Optional[str] = Field(
        None,
        description='\n\n<p>Icon of <em>next button</em>.</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>',
    )
    color: Optional[Any] = Field(
        '#A4B1D7',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#A4B1D7',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class LineStyle49(BaseModel):
    color: Optional[Any] = Field(
        '#316BF3',
        description='\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',
    )
    width: Optional[float] = Field(0, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class ItemStyle11(BaseModel):
    color: Optional[Any] = Field(
        '#316BF3',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName36(_StyleName):
    pass


class Rich36(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName36] = Field(
        None, alias='<style_name>', description=''
    )


class Label19(BaseModel):
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the label.</p>\n'
    )
    interval: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Interval of <code class="codespan">label</code>. When it is assigned with a numerical value, such as  <code class="codespan">2</code>, a label would show every 2 items.</p>\n',
    )
    rotate: Optional[Any] = Field(
        0,
        description='<p>Rotation angle of <code class="codespan">label</code>, in which positive values refer to counter clockwise rotation.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    color: Optional[Any] = Field(
        '#6f778d', description='\n\n<p>timeline.lable text color.</p>\n'
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>timeline.lable 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>timeline.lable 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>timeline.lable font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>timeline.lable font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich36] = Field(
        None,
        description='<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',
    )


class Progress(BaseModel):
    """
    <p>Styles of line, labels and symbols in progress.</p>

    """

    lineStyle: Optional[LineStyle49] = Field(None, description='')
    itemStyle: Optional[ItemStyle11] = Field(None, description='')
    label: Optional[Label19] = Field(None, description='')


class _StyleName37(_StyleName):
    pass


class Rich37(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName37] = Field(
        None, alias='<style_name>', description=''
    )


class Label20(BaseModel):
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the label.</p>\n'
    )
    interval: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Interval of <code class="codespan">label</code>. When it is assigned with a numerical value, such as  <code class="codespan">2</code>, a label would show every 2 items.</p>\n',
    )
    rotate: Optional[Any] = Field(
        0,
        description='<p>Rotation angle of <code class="codespan">label</code>, in which positive values refer to counter clockwise rotation.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of axis label, which supports string template and callback function.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use string template; template variable is the default label of axis {value}\nformatter: &#39;{value} kg&#39;\n// Use callback.\nformatter: function (value, index) {\n    return value + &#39;kg&#39;;\n}\n</code></pre>\n<hr>\n<p>For axes of time <a href="#.type">type</a>: <code class="codespan">&#39;time&#39;</code>, <code class="codespan">formatter</code> supports the following forms:</p>\n<ul>\n<li><strong>String Templates</strong>: an easy and fast way to make frequently used date/time template, formed in <code class="codespan">string</code></li>\n<li><strong>Callback Functions</strong>: customized formatter to make complex format, formed in <code class="codespan">Function</code></li>\n<li><strong>Cascading Templates</strong>: to adopt different formatters for different time granularity, formed in <code class="codespan">object</code></li>\n</ul>\n<p>Next, we are going to introduce these three forms one by one.</p>\n<p><strong> String Templates </strong></p>\n<p>Using string templates is an easy way to format date/time with frequently used formats. If it can be used to make what you want, you are advised to do so. If not, you could then consider the others. Supported formats are:</p>\n<table>\n<thead>\n<tr>\n<th>Group</th>\n<th>Template</th>\n<th>Value (EN)</th>\n<th>Value (ZH)</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Year</td>\n<td>{yyyy}</td>\n<td>e.g., 2020, 2021, ...</td>\n<td>例：2020, 2021, ...</td>\n</tr>\n<tr>\n<td></td>\n<td>{yy}</td>\n<td>00-99</td>\n<td>00-99</td>\n</tr>\n<tr>\n<td>Quarter</td>\n<td>{Q}</td>\n<td>1, 2, 3, 4</td>\n<td>1, 2, 3, 4</td>\n</tr>\n<tr>\n<td>Month</td>\n<td>{MMMM}</td>\n<td>e.g., January, February, ...</td>\n<td>一月、二月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MMM}</td>\n<td>e.g., Jan, Feb, ...</td>\n<td>1月、2月、……</td>\n</tr>\n<tr>\n<td></td>\n<td>{MM}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{M}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Day of Month</td>\n<td>{dd}</td>\n<td>01-31</td>\n<td>01-31</td>\n</tr>\n<tr>\n<td></td>\n<td>{d}</td>\n<td>1-31</td>\n<td>1-31</td>\n</tr>\n<tr>\n<td>Day of Week</td>\n<td>{eeee}</td>\n<td>Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday</td>\n<td>星期日、星期一、星期二、星期三、星期四、星期五、星期六</td>\n</tr>\n<tr>\n<td></td>\n<td>{ee}</td>\n<td>Sun, Mon, Tues, Wed, Thu, Fri, Sat</td>\n<td>日、一、二、三、四、五、六</td>\n</tr>\n<tr>\n<td></td>\n<td>{e}</td>\n<td>1-54</td>\n<td>1-54</td>\n</tr>\n<tr>\n<td>Hour</td>\n<td>{HH}</td>\n<td>00-23</td>\n<td>00-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{H}</td>\n<td>0-23</td>\n<td>0-23</td>\n</tr>\n<tr>\n<td></td>\n<td>{hh}</td>\n<td>01-12</td>\n<td>01-12</td>\n</tr>\n<tr>\n<td></td>\n<td>{h}</td>\n<td>1-12</td>\n<td>1-12</td>\n</tr>\n<tr>\n<td>Minute</td>\n<td>{mm}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{m}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Second</td>\n<td>{ss}</td>\n<td>00-59</td>\n<td>00-59</td>\n</tr>\n<tr>\n<td></td>\n<td>{s}</td>\n<td>0-59</td>\n<td>0-59</td>\n</tr>\n<tr>\n<td>Millisecond</td>\n<td>{SSS}</td>\n<td>000-999</td>\n<td>000-999</td>\n</tr>\n<tr>\n<td></td>\n<td>{S}</td>\n<td>0-999</td>\n<td>0-999</td>\n</tr>\n</tbody>\n</table>\n<blockquote>\n<p>Templates of other languages can be found in <a href="https://github.com/apache/echarts/tree/master/src/i18n" target="_blank">the language package</a>. Please refer to <a href="api.html#echarts.registerLocale" target="_blank">echarts.registerLocale</a> to register a language.</p>\n</blockquote>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: &#39;{yyyy}-{MM}-{dd}&#39; // gets labels like &#39;2020-12-02&#39;\nformatter: &#39;Day {d}&#39; // gets labels like &#39;Day 2&#39;\n</code></pre>\n<p><strong> Callback Functions </strong></p>\n<p>Callback functions can be used to get different formats for different axis tick values. Sometimes, if you have complex date/time formatting requirement, third-party libraries like <a href="https://momentjs.com/" target="_blank">Moment.js</a> or <a href="https://date-fns.org/" target="_blank">date-fns</a> can be used to return formatted labels.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">// Use callback function; function parameters are axis index\nformatter: function (value, index) {\n    // Formatted to be month/day; display year only in the first label\n    var date = new Date(value);\n    var texts = [(date.getMonth() + 1), date.getDate()];\n    if (index === 0) {\n        texts.unshift(date.getYear());\n    }\n    return texts.join(&#39;/&#39;);\n}\n</code></pre>\n<p><strong> Cascading Templates </strong></p>\n<p>Sometimes, we wish to use different formats for different time granularity. For example, in a quarter-year chart, we may wish to see the month name with the first date of the month, while see the date name with others. This can be made with:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">formatter: {\n    month: &#39;{MMMM}&#39;, // Jan, Feb, ...\n    day: &#39;{d}&#39; // 1, 2, ...\n}\n</code></pre>\n<p>Supported levels and their default formatters are:</p>\n<pre><code class="lang-ts">{\n    year: &#39;{yyyy}&#39;,\n    month: &#39;{MMM}&#39;,\n    day: &#39;{d}&#39;,\n    hour: &#39;{HH}:{mm}&#39;,\n    minute: &#39;{HH}:{mm}&#39;,\n    second: &#39;{HH}:{mm}:{ss}&#39;,\n    millisecond: &#39;{hh}:{mm}:{ss} {SSS}&#39;,\n    none: &#39;{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}&#39;\n}\n</code></pre>\n<p>Let&#39;s take <code class="codespan">day</code> for example. When a tick value is <code class="codespan">0</code> for its hour, minute, second, and millisecond, <code class="codespan">day</code> level will be used to make formatter. <code class="codespan">none</code> is used when no other level fulfills, which is for tick values with millisecond values other than <code class="codespan">0</code>.</p>\n<p><strong> Rich Text </strong></p>\n<p>The above three forms all support rich text, so it can be used to make some complex effects.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: {\n            // Display year and month information on the first data of a year\n            year: &#39;{yearStyle|{yyyy}}\\n{monthStyle|{MMM}}&#39;,\n            month: &#39;{monthStyle|{MMM}}&#39;\n        },\n        rich: {\n            yearStyle: {\n                // Make yearly text more standing out\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            monthStyle: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n<p>The above example can also be made with a callback function:</p>\n<p>Example:</p>\n<pre><code class="lang-ts">xAxis: {\n    type: &#39;time&#39;,\n    axisLabel: {\n        formatter: function (value) {\n            const date = new Date(value);\n            const yearStart = new Date(value);\n            yearStart.setMonth(0);\n            yearStart.setDate(1);\n            yearStart.setHours(0);\n            yearStart.setMinutes(0);\n            yearStart.setSeconds(0);\n            yearStart.setMilliseconds(0);\n            // Whether a tick value is the start of a year\n            if (date.getTime() === yearStart.getTime()) {\n                return &#39;{year|&#39; + date.getFullYear() + &#39;}\\n&#39;\n                    + &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;;\n            }\n            else {\n                return &#39;{month|&#39; + (date.getMonth() + 1) + &#39;月}&#39;\n            }\n        },\n        rich: {\n            year: {\n                color: &#39;#000&#39;,\n                fontWeight: &#39;bold&#39;\n            },\n            month: {\n                color: &#39;#999&#39;\n            }\n        }\n    }\n},\n</code></pre>\n',
    )
    color: Optional[Any] = Field(
        '#6f778d', description='\n\n<p>timeline.lable.emphasis text color.</p>\n'
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\n\n<p>timeline.lable.emphasis 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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\n\n<p>timeline.lable.emphasis 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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p>timeline.lable.emphasis font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(
        12, description='\n\n<p>timeline.lable.emphasis font size.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich37] = Field(
        None,
        description='<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',
    )


class ItemStyle12(BaseModel):
    color: Optional[Any] = Field(
        '#316BF3',
        description='\n\n<p>timeline  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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p>timeline  border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\n\n<p>timeline  border width. No border when it is set to be 0.</p>\n<p>timeline  border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>timeline  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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class Emphasis10(BaseModel):
    label: Optional[Label20] = Field(None, description='')
    itemStyle: Optional[ItemStyle12] = Field(None, description='')
    checkpointStyle: Optional[Any] = Field(
        None, description='<p>Style of the checkpoint.</p>\n'
    )
    controlStyle: Optional[Any] = Field(
        None, description='<p>Style of the control button.</p>\n'
    )


class Timeline(BaseModel):
    """
        <p><code class="codespan">timeline</code> component, which provides functions like switching and playing between multiple ECharts <code class="codespan">options</code>.</p>
    <p>Here is an example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/mix-timeline-all&edit=1&reset=1" width="600" height="400"></iframe>


    <p>Different from other cases, <code class="codespan">timeline</code> component requires multiple options. We call first the parameter of <code class="codespan">setOption</code> as <code class="codespan">ECOption</code>, and call the traditional single ECharts option as <code class="codespan">ECUnitOption</code>.</p>
    <ul>
    <li>In the case that <code class="codespan">timeline</code> and <code class="codespan">media query</code> are not set, an <code class="codespan">ECUnitOption</code> is an <code class="codespan">ECOption</code>.</li>
    <li>In the case that <code class="codespan">timeline</code> or <code class="codespan">media query</code> are set, an <code class="codespan">ECOption</code> is made up with several <code class="codespan">ECUnitOption</code>s.<ul>
    <li>The properties at the root of <code class="codespan">ECOption</code> form an <code class="codespan">ECUnitOption</code>, which is also called <code class="codespan">baseOption</code>, representing the default settings.</li>
    <li>Each item of the array <code class="codespan">options</code> form an <code class="codespan">ECUnitOption</code>, which can be also called <code class="codespan">switchableOption</code>, representing options for each time tick.</li>
    </ul>
    </li>
    <li><code class="codespan">baseOption</code> and one <code class="codespan">switchableOption</code> are used to calculate the <code class="codespan">finalOption</code>, based on which the chart will be final rendered.</li>
    </ul>
    <p>For example:</p>
    <pre><code class="lang-javascript">myChart.setOption({
        // This is the properties of `baseOption`.
        timeline: {
            ...,
            // each item in `timeline.data` corresponds to each
            // `option` in `options` array.
            data: [&#39;2002-01-01&#39;, &#39;2003-01-01&#39;, &#39;2004-01-01&#39;]
        },
        title: {
            subtext: &#39; Data is from National Bureau of Statistics &#39;
        },
        grid: { ... },
        xAxis: [ ... ],
        yAxis: [ ... ],
        series: [{
            // other configurations of series 1
            type: &#39;bar&#39;,
            ...
        }, {
            // other configurations of series 2
            type: &#39;line&#39;,
            ...
        }, {
            // other configurations of series 3
            type: &#39;pie&#39;,
            ...
        }],
        // `switchableOption`s:
        options: [{
            // it is an option corresponding to &#39;2002-01-01&#39;
            title: {
            text: &#39;the statistics of the year 2002&#39;
            },
            series: [
                { data: [] }, // the data of series 1
                { data: [] }, // the data of series 2
                { data: [] }  // the data of series 3
            ]
        }, {
            // it is an option corresponding to &#39;2003-01-01&#39;
            title: {
                text: &#39;the statistics of the year 2003&#39;
            },
            series: [
                { data: [] },
                { data: [] },
                { data: [] }
            ]
        }, {
            // it is an option corresponding to &#39;2004-01-01&#39;
            title: {
                text: &#39;the statistics of the year 2004&#39;
            },
            series: [
                { data: [] },
                { data: [] },
                { data: [] }
            ]
        }]
    });
    </code></pre>
    <p><br>
    <strong>How the <code class="codespan">finalOption</code> calculated?</strong></p>
    <p>When initializing, a <code class="codespan">switchableOption</code> corresponding to the current time tick are merged into <code class="codespan">baseOption</code> to form the <code class="codespan">finalOption</code>. Each time the current tick changed, the new <code class="codespan">switchableOption</code> corresponding to the new time tick are merged into the <code class="codespan">finalOption</code>.</p>
    <p>There are two merging strategy.</p>
    <ul>
    <li>By default, use <code class="codespan">NORMAL_MERGE</code>.</li>
    <li>If <a href="#option.html#timeline.replaceMerge">timeline.replaceMerge</a> is set, use <code class="codespan">REPLACE_MERGE</code>. See <a href="#api.html#echartsInstance.setOption">setOption</a> for more details of <code class="codespan">REPLACE_MERGE</code>.</li>
    </ul>
    <p><br>
    <strong>Compatibility with ECharts 4:</strong></p>
    <p>We also support these equivalent setting styles:</p>
    <pre><code class="lang-ts">option = {
        baseOption: {
            timeline: {},
            series: [],
            // ... other properties of baseOption.
        },
        options: []
    };
    </code></pre>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show the <code class="codespan">timeline</code> component. It would not show with a setting of <code class="codespan">false</code>, but its functions still remain.</p>\n',
    )
    type: Optional[str] = Field(
        'slider',
        description='<p>This attribute has only one valid value as <code class="codespan">slider</code> by now. You don&#39;t have to change it.</p>\n',
    )
    axisType: Optional[str] = Field(
        'time',
        description='<p>Type of axis, whose values may be:</p>\n<ul>\n<li><code class="codespan">&#39;value&#39;</code>\n  Numeric axis, which is suitable for continuous data.</li>\n<li><code class="codespan">&#39;category&#39;</code>\n  Category axis, which is suitable for category data.</li>\n<li><code class="codespan">&#39;time&#39;</code>\n  Time axis, which is suitable for continuous time data. Compared with value axis, time axis is equipped with time formatting function and has a different method when calculating axis ticks. For example, for time axis, axis ticks may vary in choosing unit as month, week, date, or hour based on the range of data.</li>\n</ul>\n',
    )
    currentIndex: Optional[float] = Field(
        0,
        description='\n\n<p>Indicates which is the currently selected item. For instance, if <code class="codespan">currentIndex</code> is <code class="codespan">0</code>, it indicates that the currently selected item is <code class="codespan">timeline.data[0]</code> (namely, using <code class="codespan">options[0]</code>).</p>\n',
    )
    autoPlay: Optional[bool] = Field(
        False, description='\n\n<p>Whether to play automatically.</p>\n'
    )
    rewind: Optional[bool] = Field(
        False, description='\n\n<p>Whether supports playing reversely.</p>\n'
    )
    loop: Optional[bool] = Field(
        True, description='\n\n<p>Whether to loop playing.</p>\n'
    )
    playInterval: Optional[float] = Field(
        2000,
        description='\n\n<p>Indicates play speed (gap time between two state), whose unit is millisecond.</p>\n',
    )
    realtime: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether the view updates in real time during dragging the control dot.</p>\n',
    )
    replaceMerge: Optional[Union[Any, str]] = Field(
        'undefined',
        description='<p>When initializing, a <code class="codespan">switchableOption</code> corresponding to the current time tick are merged into <code class="codespan">baseOption</code> to form the <code class="codespan">finalOption</code>. Each time the current tick changed, the new <code class="codespan">switchableOption</code> corresponding to the new time tick are merged into the <code class="codespan">finalOption</code>.</p>\n<p>There are two merging strategy.</p>\n<ul>\n<li>By default, use <code class="codespan">NORMAL_MERGE</code>.</li>\n<li>If <a href="#option.html#timeline.replaceMerge">timeline.replaceMerge</a> is set, use <code class="codespan">REPLACE_MERGE</code>. See <a href="#api.html#echartsInstance.setOption">setOption</a> for more details of <code class="codespan">REPLACE_MERGE</code>.</li>\n</ul>\n<p><br></p>\n<p>The value of <code class="codespan">replaceMerge</code> can be a <code class="codespan">mainType</code> of a component, like <code class="codespan">replaceMerge: &#39;xAxis&#39;</code>, or an array of <code class="codespan">mainType</code>s, like <code class="codespan">replaceMerge: [&#39;xAxis&#39;, &#39;series&#39;]</code>.</p>\n<p><code class="codespan">replaceMerge</code> is usually used in this scenario: if users intending to replace all of the current series with the new series corresponding to the next time tick without any merging, users can set: <code class="codespan">replaceMerge: &#39;series&#39;</code>, and make sure that the series are in different id or no id.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/timeline-dynamic-series&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    controlPosition: Optional[str] = Field(
        'left',
        description='\n\n<p>Position of the play button, whose valid values are <code class="codespan">&#39;left&#39;</code> and <code class="codespan">&#39;right&#39;</code>.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between timeline component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between timeline component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between timeline component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between timeline component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    padding: Optional[Union[float, Any]] = Field(
        5,
        description='\n\n\n\n\n\n<p>timeline space around content. The unit is px. Default values for each position are 5. And they can be set to different values with left, right, top, and bottom.</p>\n<p>Examples:</p>\n<pre><code class="lang-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',
    )
    orient: Optional[str] = Field(
        'horizontal',
        description='\n\n<p>Orientation of the component, whose valid values are:</p>\n<ul>\n<li><code class="codespan">&#39;vertical&#39;</code>: vertical layout.</li>\n<li><code class="codespan">&#39;horizontal&#39;</code>: horizontal layout.</li>\n</ul>\n',
    )
    inverse: Optional[bool] = Field(
        False,
        description='\n\n<ul>\n<li>Whether to put the <code class="codespan">timeline</code> component reversely, which makes the elements in the front to be at the end.</li>\n</ul>\n',
    )
    symbol: Optional[str] = Field(
        'emptyCircle',
        description='\n\n<p>Symbol of timeline.</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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        10,
        description='\n\n<p>timeline 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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate degree of timeline 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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Offset of timeline symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code 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',
    )
    lineStyle: Optional[LineStyle48] = Field(None, description='')
    label: Optional[Label18] = Field(
        None,
        description='<p>Label axis, <code class="codespan">emphasis</code> is the highlighted style of text. For instance, text style in <code class="codespan">emphasis</code> would be used when mouse hovers or legend connects.</p>\n',
    )
    itemStyle: Optional[ItemStyle10] = Field(
        None,
        description='<p>Graphic style of timeline , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    checkpointStyle: Optional[CheckpointStyle] = Field(
        None,
        description='<p>Style of the selected item (<code class="codespan">checkpoint</code>).</p>\n',
    )
    controlStyle: Optional[ControlStyle] = Field(
        None,
        description='<p>The style of <em>control button</em>, which includes: <em>play button</em>, <em>previous button</em>, and <em>next button</em>.</p>\n',
    )
    progress: Optional[Progress] = Field(
        None, description='<p>Styles of line, labels and symbols in progress.</p>\n'
    )
    emphasis: Optional[Emphasis10] = Field(None, description='')
    data: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">timeline</code> data. Each item of <code class="codespan">Array</code> can be a instant value. If you need to set style individually for a data item, the <code class="codespan">data</code> item should be written as <code class="codespan">Object</code>. In then <code class="codespan">Object</code>, the attribute of <code class="codespan">value</code> is numerical value. Other attributes, such as shown the examples below, could cover the attribute configurations in <code class="codespan">timeline</code>.</p>\n<p>as follows:</p>\n<pre><code class="lang-javascript">[\n    &#39;2002-01-01&#39;,\n    &#39;2003-01-01&#39;,\n    &#39;2004-01-01&#39;,\n    {\n        value: &#39;2005-01-01&#39;,\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: &#39;{b} xxxx&#39;\n        },\n        symbol: &#39;diamond&#39;,  // the special setting of this item&#39;s symbol.\n        symbolSize: 16      // the special setting of this item&#39;s size.\n    },\n    &#39;2006-01-01&#39;,\n    &#39;2007-01-01&#39;,\n    &#39;2008-01-01&#39;,\n    &#39;2009-01-01&#39;,\n    &#39;2010-01-01&#39;,\n    {\n        value: &#39;2011-01-01&#39;,\n        tooltip: {          // enables `tooltip` to be displayed as mouse hovering to this item.\n            formatter: function (params) {\n                return params.name + &#39;xxxx&#39;;\n            }\n        },\n        symbol: &#39;diamond&#39;,\n        symbolSize: 18\n    },\n]\n</code></pre>\n',
    )


class EnterAnimation(BaseModel):
    """
    <p>Configurations of enter animation.</p>

    """

    duration: Optional[float] = Field(None, description='<p>动画时长，单位 ms</p>\n')
    easing: Optional[str] = Field(
        None,
        description='<p>动画缓动。不同的缓动效果可以参考 <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">缓动示例</a>。</p>\n',
    )
    delay: Optional[float] = Field(None, description='<p>动画延迟时长，单位 ms</p>\n')


class UpdateAnimation(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation(BaseModel):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    duration: Optional[float] = Field(None, description='<p>动画时长，单位 ms</p>\n')
    easing: Optional[str] = Field(
        None,
        description='<p>动画缓动。不同的缓动效果可以参考 <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">缓动示例</a>。</p>\n',
    )
    delay: Optional[float] = Field(None, description='<p>动画延迟时长，单位 ms</p>\n')
    loop: Optional[bool] = Field(
        None, description='<p>If loop the keyframe animation.</p>\n'
    )
    keyframes: Optional[Any] = Field(
        None,
        description='<p>The keyframes of the animation. Each item in the array is a keyframe in the following format.</p>\n<pre><code class="lang-ts">interface Keyframe {\n    // Keyframe position. 0 is the first frame, 1 is the last frame\n    // The time of keyframe is percent * duration + delay\n    percent: number\n    // Easing function from the last keyframe to this keyframe. Optional\n    easing?: number\n\n    // Other properties are for configuring the state of target at this keyframe, such as x, y, style, shape, etc.\n}\n</code></pre>\n',
    )


class TextConfig(BaseModel):
    position: Optional[Any] = Field(
        'inside',
        description='<p>Position of <code class="codespan">textContent</code>.</p>\n<ul>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n<li>&#39;top&#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;insideTopRight&#39;</li>\n<li>&#39;insideBottomLeft&#39;</li>\n<li>&#39;insideBottomRight&#39;</li>\n<li>or like <code class="codespan">[12, 33]</code></li>\n<li>or like <code class="codespan">[&#39;50%&#39;, &#39;50%&#39;]</code></li>\n</ul>\n',
    )
    rotation: Optional[float] = Field(
        None,
        description='<p>Rotation of <code class="codespan">textContent</code>. In radian.</p>\n',
    )
    layoutRect: Optional[Any] = Field(
        None,
        description='<p>Rect that <code class="codespan">textContent</code> will be positioned.\nDefault to be the bounding box of host element.</p>\n<pre><code class="lang-ts">{\n    x: number\n    y: number\n    width: number\n    height: number\n}\n</code></pre>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='<p>Offset of the <code class="codespan">textContent</code>.</p>\n<p>The difference of <code class="codespan">offset</code> and <code class="codespan">position</code> is that <code class="codespan">offset</code> will be applied in the rotation.</p>\n',
    )
    origin: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">origin</code> is relative to the bounding box of the host element.\nCan be percent value. Relative to the bounding box.\nIf <code class="codespan">&#39;center&#39;</code> specified, it will be center of the bounding box.</p>\n<p>Only available when position and rotation are both set.</p>\n<ul>\n<li>like <code class="codespan">[12, 33]</code></li>\n<li>or like <code class="codespan">[&#39;50%&#39;, &#39;50%&#39;]</code></li>\n<li>&#39;center&#39;</li>\n</ul>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='<p>Distance to the <code class="codespan">layoutRect</code>。</p>\n',
    )
    local: Optional[bool] = Field(
        False,
        description='<p>If <code class="codespan">true</code>, it will apply host&#39;s transform.</p>\n',
    )
    insideFill: Optional[str] = Field(
        None,
        description='<p><code class="codespan">insideFill</code> is a color string or left empty.</p>\n<p>If a <code class="codespan">textContent</code> is <code class="codespan">&quot;inside&quot;</code>, its final <code class="codespan">fill</code> will be picked by this priority:\n<code class="codespan">textContent.style.fill</code> &gt; <code class="codespan">textConfig.insideFill</code> &gt; &quot;auto-calculated-fill&quot;\nIn most cases, &quot;auto-calculated-fill&quot; is white.</p>\n',
    )
    insideStroke: Optional[str] = Field(
        None,
        description='<p><code class="codespan">insideStroke</code> is a color string or left empty.</p>\n<p>If a <code class="codespan">textContent</code> is <code class="codespan">&quot;inside&quot;</code>, its final <code class="codespan">stroke</code> will be picked by this priority:\n<code class="codespan">textContent.style.stroke</code> &gt; <code class="codespan">textConfig.insideStroke</code> &gt; &quot;auto-calculated-stroke&quot;</p>\n<p>The rule of getting &quot;auto-calculated-stroke&quot;:</p>\n<ul>\n<li>If<ul>\n<li>(A) the <code class="codespan">fill</code> is specified in style (either in <code class="codespan">textContent.style</code> or <code class="codespan">textContent.style.rich</code>)</li>\n<li>or (B) needed to draw text background (either defined in <code class="codespan">textContent.style</code> or <code class="codespan">textContent.style.rich</code>)</li>\n<li>&quot;auto-calculated-stroke&quot; will be null.</li>\n</ul>\n</li>\n<li>Otherwise<ul>\n<li>&quot;auto-calculated-stroke&quot; will be the same as <code class="codespan">fill</code> of this element if possible, or null.</li>\n</ul>\n</li>\n</ul>\n',
    )
    outsideFill: Optional[str] = Field(
        None,
        description='<p><code class="codespan">outsideFill</code> is a color string or left empty.</p>\n<p>If a <code class="codespan">textContent</code> is &quot;inside&quot;, its final <code class="codespan">fill</code> will be picked by this priority:\n<code class="codespan">textContent.style.fill</code> &gt; <code class="codespan">textConfig.outsideFill</code> &gt; #000</p>\n',
    )
    outsideStroke: Optional[str] = Field(
        None,
        description='<p><code class="codespan">outsideStroke</code> is a color string or left empty.</p>\n<p>If a <code class="codespan">textContent</code> is not &quot;inside&quot;, its final <code class="codespan">stroke</code> will be picked by this priority:\n<code class="codespan">textContent.style.stroke</code> &gt; <code class="codespan">textConfig.outsideStroke</code> &gt; &quot;auto-calculated-stroke&quot;</p>\n<p>The rule of getting &quot;auto-calculated-stroke&quot;:</p>\n<ul>\n<li>If<ul>\n<li>(A) the <code class="codespan">fill</code> is specified in style (either in <code class="codespan">textContent.style</code> or <code class="codespan">textContent.style.rich</code>)</li>\n<li>or (B) needed to draw text background (either defined in <code class="codespan">textContent.style</code> or <code class="codespan">textContent.style.rich</code>)</li>\n<li>&quot;auto-calculated-stroke&quot; will be null.</li>\n</ul>\n</li>\n<li>Otherwise<ul>\n<li>&quot;auto-calculated-stroke&quot; will be a near white color to distinguish &quot;front end&quot; label with messy background (like other text label, line or other graphic).</li>\n</ul>\n</li>\n</ul>\n',
    )
    inside: Optional[bool] = Field(
        None,
        description='<p>Tell echarts that I can make sure this text is inside or not.</p>\n',
    )


class Element(BaseModel):
    """
    <p><code class="codespan">group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>

    """

    type: Optional[str] = Field(
        'group',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-group.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-group.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-group.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-group.left">left</a> and <a href="#graphic.elements-group.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-group.left">left</a> or <a href="#graphic.elements-group.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-group.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-group.left">left</a> and <a href="#graphic.elements-group.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-group.left">left</a> or <a href="#graphic.elements-group.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-group.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-group.top">top</a> and <a href="#graphic.elements-group.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-group.top">top</a> or <a href="#graphic.elements-group.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-group.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-group.top">top</a> and <a href="#graphic.elements-group.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-group.top">top</a> or <a href="#graphic.elements-group.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-group.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    width: Optional[float] = Field(
        0,
        description='<p>Specify width of this <code class="codespan">group</code>.</p>\n<p>This width is only used for the positioning of its children.</p>\n<p>When width is <code class="codespan">0</code>, children can also be positioned according to its parent using <code class="codespan">left: &#39;center&#39;</code>.</p>\n',
    )
    height: Optional[float] = Field(
        0,
        description='<p>Specify height of this <code class="codespan">group</code>.</p>\n<p>This height is only used for the positioning of its children.</p>\n<p>When height is <code class="codespan">0</code>, children can also be positioned according to its parent using <code class="codespan">top: &#39;middle&#39;</code>.</p>\n',
    )
    diffChildrenByName: Optional[bool] = Field(
        False,
        description='<p>In <a href="#series-custom">custom series</a>, when <code class="codespan">diffChildrenByName</code> is set as <code class="codespan">true</code>, for each <a href="#graphic.elements-group">group</a> returned from <a href="#series-custom.renderItem">renderItem</a>, &quot;diff&quot; will be performed to its <a href="#graphic.elements-group.children">children</a> according to the <a href="#graphic.elements-polygon.name">name</a> attribute of each graphic elements. Here &quot;diff&quot; means that map the coming graphic elements to the existing graphic elements when repainting according to <code class="codespan">name</code>, which enables the transition animation if data is modified.</p>\n<p>But notice that the operation is performance consuming, do not use it for large data amount.</p>\n',
    )
    children: Optional[Any] = Field(
        None,
        description='<p>A list of children, each item is a declaration of an element.</p>\n',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation1(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation1(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation1(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation1(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig1(TextConfig):
    pass


class Style(BaseModel):
    image: Optional[str] = Field(
        None,
        description='<p>Specify content of the image, can be a URL, or <a href="https://tools.ietf.org/html/rfc2397" target="_blank">dataURI</a>.</p>\n',
    )
    x: Optional[float] = Field(
        0,
        description='<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    y: Optional[float] = Field(
        0,
        description='<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    width: Optional[float] = Field(
        0, description='<p>The width of the shape of the element.</p>\n'
    )
    height: Optional[Any] = Field(
        0,
        description='<p>The height of the shape of the element.</p>\n<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    fill: Optional[str] = Field(
        '#000', description='<p>Color filled in this element.</p>\n'
    )
    stroke: Optional[str] = Field(None, description='<p>Color of stroke.</p>\n')
    lineWidth: Optional[float] = Field(0, description='<p>Width of stroke.</p>\n')
    shadowBlur: Optional[float] = Field(
        'undefined', description='<p>Width of shadow.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        'undefined', description='<p>X offset of shadow.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        'undefined', description='<p>Y offset of shadow.</p>\n'
    )
    shadowColor: Optional[float] = Field(
        'undefined', description='<p>color of shadow.</p>\n'
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">style</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: &#39;style&#39;,\n};\n</code></pre>\n',
    )


class Element1(BaseModel):
    type: Optional[str] = Field(
        'image',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-image.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-image.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-image.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation1] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation1] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation1] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation1] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-image.left">left</a> and <a href="#graphic.elements-image.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-image.left">left</a> or <a href="#graphic.elements-image.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-image.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-image.left">left</a> and <a href="#graphic.elements-image.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-image.left">left</a> or <a href="#graphic.elements-image.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-image.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-image.top">top</a> and <a href="#graphic.elements-image.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-image.top">top</a> or <a href="#graphic.elements-image.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-image.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-image.top">top</a> and <a href="#graphic.elements-image.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-image.top">top</a> or <a href="#graphic.elements-image.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-image.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig1] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    style: Optional[Style] = Field(None, description='')
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation2(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation2(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation2(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation2(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig2(TextConfig):
    pass


class Style1(BaseModel):
    text: Optional[str] = Field(
        '',
        description='<p>Text content. <code class="codespan">\\n</code> can be used as a line break.</p>\n',
    )
    x: Optional[float] = Field(
        0,
        description='<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    y: Optional[float] = Field(
        0,
        description='<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    font: Optional[str] = Field(
        None,
        description='<p>Font size, font type, font weight, font color, follow the form of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" target="_blank">css font</a>.</p>\n<p>For example:</p>\n<pre><code>// size | family\nfont: &#39;2em &quot;STHeiti&quot;, sans-serif&#39;\n\n// style | weight | size | family\nfont: &#39;italic bolder 16px cursive&#39;\n\n// weight | size | family\nfont: &#39;bolder 2em &quot;Microsoft YaHei&quot;, sans-serif&#39;\n</code></pre>',
    )
    textAlign: Optional[str] = Field(
        'left',
        description='<p>Text horizontal alignment. Optional values: <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, <code class="codespan">&#39;right&#39;</code>.</p>\n<p><code class="codespan">&#39;left&#39;</code> means the left side of the text block is specified by the <a href="#graphic.elements-text.style.x">style.x</a>, while <code class="codespan">&#39;right&#39;</code> means the right side of the text block is specified by <a href="#graphic.elements-text.style.y">style.y</a>.</p>\n',
    )
    textVerticalAlign: Optional[str] = Field(
        None,
        description='<p>Text vertical alignment. Optional values: <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    fill: Optional[str] = Field(
        '#000', description='<p>Color filled in this element.</p>\n'
    )
    stroke: Optional[str] = Field(None, description='<p>Color of stroke.</p>\n')
    lineWidth: Optional[float] = Field(0, description='<p>Width of stroke.</p>\n')
    shadowBlur: Optional[float] = Field(
        'undefined', description='<p>Width of shadow.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        'undefined', description='<p>X offset of shadow.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        'undefined', description='<p>Y offset of shadow.</p>\n'
    )
    shadowColor: Optional[float] = Field(
        'undefined', description='<p>color of shadow.</p>\n'
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">style</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: &#39;style&#39;,\n};\n</code></pre>\n',
    )


class Element2(BaseModel):
    """
    <p>Text block.</p>

    """

    type: Optional[str] = Field(
        'text',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-text.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-text.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-text.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation2] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation2] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation2] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation2] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-text.left">left</a> and <a href="#graphic.elements-text.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-text.left">left</a> or <a href="#graphic.elements-text.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-text.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-text.left">left</a> and <a href="#graphic.elements-text.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-text.left">left</a> or <a href="#graphic.elements-text.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-text.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-text.top">top</a> and <a href="#graphic.elements-text.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-text.top">top</a> or <a href="#graphic.elements-text.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-text.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-text.top">top</a> and <a href="#graphic.elements-text.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-text.top">top</a> or <a href="#graphic.elements-text.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-text.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig2] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    style: Optional[Style1] = Field(None, description='')
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation3(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation3(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation3(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation3(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig3(TextConfig):
    pass


class Shape(BaseModel):
    x: Optional[float] = Field(
        0,
        description='<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    y: Optional[float] = Field(
        0,
        description='<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    width: Optional[float] = Field(
        0, description='<p>The width of the shape of the element.</p>\n'
    )
    height: Optional[Any] = Field(
        0, description='<p>The height of the shape of the element.</p>\n'
    )
    r: Optional[Any] = Field(
        None,
        description='<p>Specify border radius of the rectangular here. Generally, <code class="codespan">r</code> should be <code class="codespan">[topLeftRadius, topRightRadius, BottomRightRadius, bottomLeftRadius]</code>, where each item is a number.</p>\n<p>Abbreviation is enabled, for example:</p>\n<ul>\n<li><code class="codespan">r</code>: <code class="codespan">1</code>         means <code class="codespan">[1, 1, 1, 1]</code></li>\n<li><code class="codespan">r</code>: <code class="codespan">[1]</code>       means <code class="codespan">[1, 1, 1, 1]</code></li>\n<li><code class="codespan">r</code>: <code class="codespan">[1, 2]</code>    means <code class="codespan">[1, 2, 1, 2]</code></li>\n<li><code class="codespan">r</code>: <code class="codespan">[1, 2, 3]</code> means <code class="codespan">[1, 2, 3, 2]</code></li>\n</ul>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">shape</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n};\n</code></pre>\n',
    )


class Style2(BaseModel):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    fill: Optional[str] = Field(
        '#000', description='<p>Color filled in this element.</p>\n'
    )
    stroke: Optional[str] = Field(None, description='<p>Color of stroke.</p>\n')
    lineWidth: Optional[float] = Field(0, description='<p>Width of stroke.</p>\n')
    shadowBlur: Optional[float] = Field(
        'undefined', description='<p>Width of shadow.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        'undefined', description='<p>X offset of shadow.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        'undefined', description='<p>Y offset of shadow.</p>\n'
    )
    shadowColor: Optional[float] = Field(
        'undefined', description='<p>color of shadow.</p>\n'
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">style</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: &#39;style&#39;,\n};\n</code></pre>\n',
    )


class Element3(BaseModel):
    """
    <p>Rectangle element.</p>

    """

    type: Optional[str] = Field(
        'rect',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-rect.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-rect.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-rect.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation3] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation3] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation3] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation3] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-rect.left">left</a> and <a href="#graphic.elements-rect.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-rect.left">left</a> or <a href="#graphic.elements-rect.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-rect.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-rect.left">left</a> and <a href="#graphic.elements-rect.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-rect.left">left</a> or <a href="#graphic.elements-rect.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-rect.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-rect.top">top</a> and <a href="#graphic.elements-rect.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-rect.top">top</a> or <a href="#graphic.elements-rect.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-rect.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-rect.top">top</a> and <a href="#graphic.elements-rect.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-rect.top">top</a> or <a href="#graphic.elements-rect.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-rect.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig3] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    shape: Optional[Shape] = Field(None, description='')
    style: Optional[Style2] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation4(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation4(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation4(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation4(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig4(TextConfig):
    pass


class Shape1(BaseModel):
    cx: Optional[float] = Field(
        0,
        description='<p>The x value of the center of the element in the coordinate system of its parent.</p>\n',
    )
    cy: Optional[Any] = Field(
        0,
        description='<p>The y value of the center of the element in the coordinate system of its parent.</p>\n',
    )
    r: Optional[float] = Field(0, description='<p>Outside radius.</p>\n')
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">shape</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n};\n</code></pre>\n',
    )


class Style3(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Element4(BaseModel):
    """
    <p>Circle element.</p>

    """

    type: Optional[str] = Field(
        'circle',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-circle.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-circle.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-circle.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation4] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation4] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation4] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation4] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-circle.left">left</a> and <a href="#graphic.elements-circle.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-circle.left">left</a> or <a href="#graphic.elements-circle.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-circle.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-circle.left">left</a> and <a href="#graphic.elements-circle.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-circle.left">left</a> or <a href="#graphic.elements-circle.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-circle.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-circle.top">top</a> and <a href="#graphic.elements-circle.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-circle.top">top</a> or <a href="#graphic.elements-circle.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-circle.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-circle.top">top</a> and <a href="#graphic.elements-circle.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-circle.top">top</a> or <a href="#graphic.elements-circle.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-circle.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig4] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    shape: Optional[Shape1] = Field(None, description='')
    style: Optional[Style3] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation5(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation5(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation5(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation5(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig5(TextConfig):
    pass


class Shape2(BaseModel):
    cx: Optional[float] = Field(
        0,
        description='<p>The x value of the center of the element in the coordinate system of its parent.</p>\n',
    )
    cy: Optional[Any] = Field(
        0,
        description='<p>The y value of the center of the element in the coordinate system of its parent.</p>\n',
    )
    r: Optional[float] = Field(0, description='<p>Outside radius.</p>\n')
    r0: Optional[float] = Field(0, description='<p>Inside radius.</p>\n')
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">shape</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n};\n</code></pre>\n',
    )


class Style4(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Element5(BaseModel):
    """
    <p>Ring element.</p>

    """

    type: Optional[str] = Field(
        'ring',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-ring.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-ring.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-ring.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation5] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation5] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation5] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation5] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-ring.left">left</a> and <a href="#graphic.elements-ring.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-ring.left">left</a> or <a href="#graphic.elements-ring.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-ring.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-ring.left">left</a> and <a href="#graphic.elements-ring.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-ring.left">left</a> or <a href="#graphic.elements-ring.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-ring.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-ring.top">top</a> and <a href="#graphic.elements-ring.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-ring.top">top</a> or <a href="#graphic.elements-ring.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-ring.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-ring.top">top</a> and <a href="#graphic.elements-ring.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-ring.top">top</a> or <a href="#graphic.elements-ring.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-ring.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig5] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    shape: Optional[Shape2] = Field(None, description='')
    style: Optional[Style4] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation6(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation6(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation6(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation6(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig6(TextConfig):
    pass


class Shape3(BaseModel):
    cx: Optional[float] = Field(
        0,
        description='<p>The x value of the center of the element in the coordinate system of its parent.</p>\n',
    )
    cy: Optional[Any] = Field(
        0,
        description='<p>The y value of the center of the element in the coordinate system of its parent.</p>\n',
    )
    r: Optional[float] = Field(0, description='<p>Outside radius.</p>\n')
    r0: Optional[float] = Field(0, description='<p>Inside radius.</p>\n')
    startAngle: Optional[float] = Field(
        0, description='<p>start angle, in radian.</p>\n'
    )
    endAngle: Optional[float] = Field(
        'Math.PI * 2', description='<p>end angle, in radian.</p>\n'
    )
    clockwise: Optional[bool] = Field(
        True, description='<p>Whether draw clockwise.</p>\n'
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">shape</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n};\n</code></pre>\n',
    )


class Style5(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Element6(BaseModel):
    """
    <p>Sector element.</p>

    """

    type: Optional[str] = Field(
        'sector',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-sector.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-sector.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-sector.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation6] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation6] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation6] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation6] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-sector.left">left</a> and <a href="#graphic.elements-sector.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-sector.left">left</a> or <a href="#graphic.elements-sector.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-sector.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-sector.left">left</a> and <a href="#graphic.elements-sector.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-sector.left">left</a> or <a href="#graphic.elements-sector.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-sector.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-sector.top">top</a> and <a href="#graphic.elements-sector.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-sector.top">top</a> or <a href="#graphic.elements-sector.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-sector.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-sector.top">top</a> and <a href="#graphic.elements-sector.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-sector.top">top</a> or <a href="#graphic.elements-sector.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-sector.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig6] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    shape: Optional[Shape3] = Field(None, description='')
    style: Optional[Style5] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation7(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation7(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation7(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation7(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig7(TextConfig):
    pass


class Shape4(Shape3):
    pass


class Style6(BaseModel):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    fill: Optional[str] = Field(
        None, description='<p>Color filled in this element.</p>\n'
    )
    stroke: Optional[str] = Field('"#000"', description='<p>Color of stroke.</p>\n')
    lineWidth: Optional[float] = Field(1, description='<p>Width of stroke.</p>\n')
    shadowBlur: Optional[float] = Field(
        'undefined', description='<p>Width of shadow.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        'undefined', description='<p>X offset of shadow.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        'undefined', description='<p>Y offset of shadow.</p>\n'
    )
    shadowColor: Optional[float] = Field(
        'undefined', description='<p>color of shadow.</p>\n'
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">style</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: &#39;style&#39;,\n};\n</code></pre>\n',
    )


class Element7(BaseModel):
    """
    <p>Arc element.</p>

    """

    type: Optional[str] = Field(
        'arc',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-arc.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-arc.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-arc.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation7] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation7] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation7] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation7] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-arc.left">left</a> and <a href="#graphic.elements-arc.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-arc.left">left</a> or <a href="#graphic.elements-arc.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-arc.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-arc.left">left</a> and <a href="#graphic.elements-arc.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-arc.left">left</a> or <a href="#graphic.elements-arc.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-arc.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-arc.top">top</a> and <a href="#graphic.elements-arc.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-arc.top">top</a> or <a href="#graphic.elements-arc.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-arc.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-arc.top">top</a> and <a href="#graphic.elements-arc.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-arc.top">top</a> or <a href="#graphic.elements-arc.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-arc.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig7] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    shape: Optional[Shape4] = Field(None, description='')
    style: Optional[Style6] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation8(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation8(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation8(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation8(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig8(TextConfig):
    pass


class Shape5(BaseModel):
    points: Optional[Any] = Field(
        None,
        description='<p>A list of points, which defines the shape, like <code class="codespan">[[22, 44], [44, 55], [11, 44], ...]</code>.</p>\n',
    )
    smooth: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Whether smooth the line.</p>\n<ul>\n<li>If the value is number, bezier interpolation is used, and the value specified the level of smooth, which is in the range of <code class="codespan">[0, 1]</code>.</li>\n<li>If the value is <code class="codespan">&#39;spline&#39;</code>, Catmull-Rom spline interpolation is used.</li>\n</ul>\n',
    )
    smoothConstraint: Optional[bool] = Field(
        False,
        description='<p>Whether prevent the smooth process cause the line out of the bounding box.</p>\n<p>Only works when <code class="codespan">smooth</code> is <code class="codespan">number</code> (bezier smooth).</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">shape</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n};\n</code></pre>\n',
    )


class Style7(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Element8(BaseModel):
    """
    <p>Polygon element.</p>

    """

    type: Optional[str] = Field(
        'polygon',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-polygon.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-polygon.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-polygon.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation8] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation8] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation8] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation8] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-polygon.left">left</a> and <a href="#graphic.elements-polygon.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-polygon.left">left</a> or <a href="#graphic.elements-polygon.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-polygon.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-polygon.left">left</a> and <a href="#graphic.elements-polygon.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-polygon.left">left</a> or <a href="#graphic.elements-polygon.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-polygon.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-polygon.top">top</a> and <a href="#graphic.elements-polygon.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-polygon.top">top</a> or <a href="#graphic.elements-polygon.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-polygon.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-polygon.top">top</a> and <a href="#graphic.elements-polygon.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-polygon.top">top</a> or <a href="#graphic.elements-polygon.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-polygon.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig8] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    shape: Optional[Shape5] = Field(None, description='')
    style: Optional[Style7] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation9(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation9(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation9(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation9(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig9(TextConfig):
    pass


class Shape6(Shape5):
    pass


class Style8(BaseModel):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    fill: Optional[str] = Field(
        None, description='<p>Color filled in this element.</p>\n'
    )
    stroke: Optional[str] = Field('"#000"', description='<p>Color of stroke.</p>\n')
    lineWidth: Optional[float] = Field(5, description='<p>Width of stroke.</p>\n')
    shadowBlur: Optional[float] = Field(
        'undefined', description='<p>Width of shadow.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        'undefined', description='<p>X offset of shadow.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        'undefined', description='<p>Y offset of shadow.</p>\n'
    )
    shadowColor: Optional[float] = Field(
        'undefined', description='<p>color of shadow.</p>\n'
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">style</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: &#39;style&#39;,\n};\n</code></pre>\n',
    )


class Element9(BaseModel):
    """
    <p>Polyline element.</p>

    """

    type: Optional[str] = Field(
        'polyline',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-polyline.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-polyline.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-polyline.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation9] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation9] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation9] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation9] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-polyline.left">left</a> and <a href="#graphic.elements-polyline.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-polyline.left">left</a> or <a href="#graphic.elements-polyline.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-polyline.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-polyline.left">left</a> and <a href="#graphic.elements-polyline.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-polyline.left">left</a> or <a href="#graphic.elements-polyline.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-polyline.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-polyline.top">top</a> and <a href="#graphic.elements-polyline.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-polyline.top">top</a> or <a href="#graphic.elements-polyline.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-polyline.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-polyline.top">top</a> and <a href="#graphic.elements-polyline.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-polyline.top">top</a> or <a href="#graphic.elements-polyline.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-polyline.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig9] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    shape: Optional[Shape6] = Field(None, description='')
    style: Optional[Style8] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation10(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation10(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation10(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation10(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig10(TextConfig):
    pass


class Shape7(BaseModel):
    x1: Optional[float] = Field(0, description='<p>x value of the start point.</p>\n')
    y1: Optional[float] = Field(0, description='<p>y value of the start point.</p>\n')
    x2: Optional[float] = Field(0, description='<p>x value of the end point.</p>\n')
    y2: Optional[float] = Field(0, description='<p>y value of the end point.</p>\n')
    percent: Optional[float] = Field(
        1,
        description='<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">shape</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n};\n</code></pre>\n',
    )


class Style9(Style8):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Element10(BaseModel):
    """
    <p>Line element.</p>

    """

    type: Optional[str] = Field(
        'line',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-line.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-line.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-line.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation10] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation10] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation10] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation10] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-line.left">left</a> and <a href="#graphic.elements-line.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-line.left">left</a> or <a href="#graphic.elements-line.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-line.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-line.left">left</a> and <a href="#graphic.elements-line.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-line.left">left</a> or <a href="#graphic.elements-line.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-line.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-line.top">top</a> and <a href="#graphic.elements-line.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-line.top">top</a> or <a href="#graphic.elements-line.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-line.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-line.top">top</a> and <a href="#graphic.elements-line.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-line.top">top</a> or <a href="#graphic.elements-line.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-line.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig10] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    shape: Optional[Shape7] = Field(None, description='')
    style: Optional[Style9] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class EnterAnimation11(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation11(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation11(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation11(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig11(TextConfig):
    pass


class Shape8(BaseModel):
    x1: Optional[float] = Field(0, description='<p>x value of the start point.</p>\n')
    y1: Optional[float] = Field(0, description='<p>y value of the start point.</p>\n')
    x2: Optional[float] = Field(0, description='<p>x value of the end point.</p>\n')
    y2: Optional[float] = Field(0, description='<p>y value of the end point.</p>\n')
    cpx1: Optional[float] = Field(0, description='<p>x of control point.</p>\n')
    cpy1: Optional[float] = Field(0, description='<p>y of control point.</p>\n')
    cpx2: Optional[float] = Field(
        None,
        description='<p>x of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class="codespan">cpx2</code> and <code class="codespan">cpy2</code> are not set, quatratic bezier is used.</p>\n',
    )
    cpy2: Optional[float] = Field(
        None,
        description='<p>y of the second control point. If specified, cubic bezier is used.</p>\n<p>If both <code class="codespan">cpx2</code> and <code class="codespan">cpy2</code> are not set, quatratic bezier is used.</p>\n',
    )
    percent: Optional[float] = Field(
        1,
        description='<p>Specify the percentage of drawing, useful in animation.</p>\n<p>Value range: [0, 1].</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">shape</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n};\n</code></pre>\n',
    )


class Style10(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Element11(BaseModel):
    """
    <p>Quadratic bezier curve or cubic bezier curve.</p>

    """

    type: Optional[str] = Field(
        'bezierCurve',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    _action: Optional[str] = Field(
        'merge',
        alias='$action',
        description='<p>Specify the operation should be performed to the element when calling <code class="codespan">setOption</code>.\nDefault value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.</p>\n<p>Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;merge&#39;</code>: merge the given option to existing element (if any), otherwise create a new element.</li>\n<li><code class="codespan">&#39;replace&#39;</code>: create a new element according to the given option and replace the existing element (if any).</li>\n<li><code class="codespan">&#39;remove&#39;</code>: delete the existing element (if any).</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#graphic.elements-bezierCurve.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#graphic.elements-bezierCurve.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#graphic.elements-bezierCurve.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation11] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation11] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation11] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation11] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    left: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-bezierCurve.left">left</a> and <a href="#graphic.elements-bezierCurve.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-bezierCurve.left">left</a> or <a href="#graphic.elements-bezierCurve.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-bezierCurve.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    right: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the height of its parent.</li>\n<li><code class="codespan">&#39;center&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-bezierCurve.left">left</a> and <a href="#graphic.elements-bezierCurve.right">right</a> can work.</p>\n<p>If <a href="#graphic.elements-bezierCurve.left">left</a> or <a href="#graphic.elements-bezierCurve.right">right</a> is specified, positioning attributes in <a href="#graphic.elements-bezierCurve.shape">shape</a> (like <code class="codespan">x</code>, <code class="codespan">cx</code>) will not work.</p>\n',
    )
    top: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-bezierCurve.top">top</a> and <a href="#graphic.elements-bezierCurve.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-bezierCurve.top">top</a> or <a href="#graphic.elements-bezierCurve.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-bezierCurve.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bottom: Optional[Union[float, str]] = Field(
        'undefined',
        description='<p>Specify how to be positioned in its parent.</p>\n<p>When the element is at the top level, the parent is the container of the chart instance.\nOtherwise, the parent is a <code class="codespan">group</code> element.</p>\n<p>Optional values:</p>\n<ul>\n<li>Pixel value: For example, can be a number <code class="codespan">30</code>, means <code class="codespan">30px</code>.</li>\n<li>Percent value: For example, can be a string <code class="codespan">&#39;33%&#39;</code>, means the final result should be calculated by this value and the width of its parent.</li>\n<li><code class="codespan">&#39;middle&#39;</code>: means position the element in the middle of according to its parent.</li>\n</ul>\n<p>Only one between <a href="#graphic.elements-bezierCurve.top">top</a> and <a href="#graphic.elements-bezierCurve.bottom">bottom</a> can work.</p>\n<p>If <a href="#graphic.elements-bezierCurve.top">top</a> or <a href="#graphic.elements-bezierCurve.bottom">bottom</a> is specified, positioning attributes in <a href="#graphic.elements-bezierCurve.shape">shape</a> (like <code class="codespan">y</code>, <code class="codespan">cy</code>) will not work.</p>\n',
    )
    bounding: Optional[str] = Field(
        'all',
        description='<p>Used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n<p>See sample:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/graphic-bounding&edit=1&reset=1" width="500" height="500"></iframe>\n\n\n<p>Optional values:</p>\n<ul>\n<li><p><code class="codespan">&#39;all&#39;</code>: (default)\n  Use the transformed bounding box of itself and its descendants to perform position calculation, which confine the entire body in the boundary of its parent.</p>\n</li>\n<li><p><code class="codespan">&#39;raw&#39;</code>:\n  Only use the untransformed bounding box of itself (without its descentant) to perform position calculation, which is suitable when the content in the element need to be overflow its parent.</p>\n</li>\n</ul>\n',
    )
    z: Optional[float] = Field(
        0, description='<p>z value of the elements, determine the overlap order.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p>Determine which canvas layer this element should be in.</p>\n<p>Notice: Multiple canvas layer may affect performance.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#graphic.elements-text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig11] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    draggable: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Whether the element is draggable.</p>\n<p>You may set it to be <code class="codespan">true/false</code> to enable/disable dragging, or set it to be <code class="codespan">&#39;horizontal&#39;/&#39;vertical&#39;</code> to make the element only horizontally/vertically draggable.</p>\n',
    )
    progressive: Optional[bool] = Field(
        False,
        description='<p>Whether use progressive render to improve performance. Usually used when number of element is too large.</p>\n',
    )
    shape: Optional[Shape8] = Field(None, description='')
    style: Optional[Style10] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    onclick: Optional[Any] = Field(None, description='')
    onmouseover: Optional[Any] = Field(None, description='')
    onmouseout: Optional[Any] = Field(None, description='')
    onmousemove: Optional[Any] = Field(None, description='')
    onmousewheel: Optional[Any] = Field(None, description='')
    onmousedown: Optional[Any] = Field(None, description='')
    onmouseup: Optional[Any] = Field(None, description='')
    ondrag: Optional[Any] = Field(None, description='')
    ondragstart: Optional[Any] = Field(None, description='')
    ondragend: Optional[Any] = Field(None, description='')
    ondragenter: Optional[Any] = Field(None, description='')
    ondragleave: Optional[Any] = Field(None, description='')
    ondragover: Optional[Any] = Field(None, description='')
    ondrop: Optional[Any] = Field(None, description='')


class Graphic(BaseModel):
    """
        <p><code class="codespan">graphic</code> component enables creating graphic elements in ECharts.</p>
    <p>Those graphic type are supported.</p>
    <p><a href="#graphic.elements-image">image</a>,
    <a href="#graphic.elements-text">text</a>,
    <a href="#graphic.elements-circle">circle</a>,
    <a href="#graphic.elements-sector">sector</a>,
    <a href="#graphic.elements-ring">ring</a>,
    <a href="#graphic.elements-polygon">polygon</a>,
    <a href="#graphic.elements-polyline">polyline</a>,
    <a href="#graphic.elements-rect">rect</a>,
    <a href="#graphic.elements-line">line</a>,
    <a href="#graphic.elements-bezierCurve">bezierCurve</a>,
    <a href="#graphic.elements-arc">arc</a>,
    <a href="#graphic.elements-group">group</a>,</p>
    <p>This example shows how to make a watermark and text block:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-graphic&edit=1&reset=1" width="600" height="400"></iframe>


    <p>This example use hidden graphic elements to implement dragging:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-draggable&edit=1&reset=1" width="600" height="400"></iframe>


    <p><strong>Graphic Component Configuration</strong></p>
    <p>A simple way to define a graphic element:</p>
    <pre><code class="lang-javascript">myChart.setOption({
        ...,
        graphic: {
            type: &#39;image&#39;,
            ...
        }
    });
    </code></pre>
    <p>Define multiple graphic elements:</p>
    <pre><code class="lang-javascript">myChart.setOption({
        ...,
        graphic: [
            { // A &#39;image&#39; element.
                type: &#39;image&#39;,
                ...
            },
            { // A &#39;text&#39; element, with id specified.
                type: &#39;text&#39;,
                id: &#39;text1&#39;,
                ...
            },
            { // A &#39;group&#39; element, in which children can be defined.
                type: &#39;group&#39;,
                children: [
                    {
                        type: &#39;rect&#39;,
                        id: &#39;rect1&#39;,
                        ...
                    },
                    {
                        type: &#39;image&#39;,
                        ...
                    },
                    ...
                ]
            }
            ...
        ]
    });

    </code></pre>
    <p>How to remove or replace existing elements by <code class="codespan">setOption</code>:</p>
    <pre><code class="lang-javascript">myChart.setOption({
        ...,
        graphic: [
            { // Remove the element &#39;text1&#39; defined above.
                id: &#39;text1&#39;,
                $action: &#39;remove&#39;,
                ...
            },
            { // Replace the element &#39;rect1&#39; to a new circle element.
              // Note, although in the sample above &#39;rect1&#39; is a children of a group,
              // it is not necessary to consider level relationship when setOption
              // again if you use id to specify them.
                id: &#39;rect1&#39;,
                $action: &#39;replace&#39;,
                type: &#39;circle&#39;,
                ...
            }
        ]
    });
    </code></pre>
    <p>Notice, when using <code class="codespan">setOption</code> to modify existing elements, if id is not specified, new options will be mapped to existing elements by their order, which might bring unexpected result sometimes. So, generally, using id is recommended.</p>
    <p><strong>Graphic Element Configuration</strong></p>
    <p>Different types of graphic elements has their own configuration respectively, but they have these common configuration below:</p>
    <pre><code class="lang-javascript">{
        // id is used to specifying element when willing to update it.
        // id can be ignored if you do not need it.
        id: &#39;xxx&#39;,

        // Specify element type. Can not be ignored when define a element at the first time.
        type: &#39;image&#39;,

        // All of the properties below can be ignored and a default value will be assigned.

        // Specify the operation should be performed to the element when calling `setOption`.
        // Default value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.
        $action: &#39;replace&#39;,

        // These four properties is used to locating the element. Each property can be absolute
        // value (like 10, means 10 pixel) or precent (like &#39;12%&#39;) or &#39;center&#39;/&#39;middle&#39;.
        left: 10,
        // right: 10,
        top: &#39;center&#39;,
        // bottom: &#39;10%&#39;,

        shape: {
            // Here are configurations for shape, like `x`, `y`, `cx`, `cy`, `width`,
            // `height`, `r`, `points`, ...
            // Note, if `left`/`right`/`top`/`bottom` has been set, `x`/`y`/`cx`/`cy`
            // do not work here.
        },

        style: {
            // Here are configurations for style of the element, like `fill`, `stroke`,
            // `lineWidth`, `shadowBlur`, ...
        },

        // z value of the elements.
        z: 10,
        // Whether response to mouse events / touch events.
        silent: true,
        // Whether the element is visible.
        invisible: false,
        // Used to specify whether the entire transformed element (containing children if is group)
        // is confined in its container. Optional values: &#39;raw&#39;, &#39;all&#39;.
        bounding: &#39;raw&#39;,
        // Can be dragged or not.
        draggable: false,
        // Event handler, can also be onmousemove, ondrag, ... (listed below)
        onclick: function () {...}
    }
    </code></pre>
    <p><strong>Event Handlers of Graphic Element</strong></p>
    <p>These events are supported:
    <code class="codespan">onclick</code>, <code class="codespan">onmouseover</code>, <code class="codespan">onmouseout</code>, <code class="codespan">onmousemove</code>, <code class="codespan">onmousewheel</code>, <code class="codespan">onmousedown</code>, <code class="codespan">onmouseup</code>, <code class="codespan">ondrag</code>, <code class="codespan">ondragstart</code>, <code class="codespan">ondragend</code>, <code class="codespan">ondragenter</code>, <code class="codespan">ondragleave</code>, <code class="codespan">ondragover</code>, <code class="codespan">ondrop</code>.</p>
    <p><strong>Hierarchy of Graphic Elements</strong></p>
    <p>Only <code class="codespan">group</code> element has children, which enable a group of elements to be positioned and transformed together.</p>
    <p><strong>Shape Configuration of Graphic Element</strong></p>
    <p>Elements with different types have different shape setting repectively. For example:</p>
    <pre><code class="lang-javascript">{
        type: &#39;rect&#39;,
        shape: {
            x: 10,
            y: 10,
            width: 100,
            height: 200
        }
    },
    {
        type: &#39;circle&#39;,
        shape: {
            cx: 20,
            cy: 30,
            r: 100
        }
    },
    {
        type: &#39;image&#39;,
        style: {
            image: &#39;http://example.website/a.png&#39;,
            x: 100,
            y: 200,
            width: 230,
            height: 400
        }
    },
    {
        type: &#39;text&#39;,
        style: {
            text: &#39;This text&#39;,
            x: 100,
            y: 200
        }

    }
    </code></pre>
    <p><strong>Transforming and Absolutely Positioning of Graphic Element</strong></p>
    <p>Element can be transformed (translation, rotation, scale). See <a href="#graphic.elements.position">position</a>, <a href="#graphic.elements.rotation">rotation</a>, <a href="#graphic.elements.scale">scale</a>, <a href="#graphic.elements.origin">origin</a></p>
    <p>For example:</p>
    <pre><code class="lang-javascript">{
        type: &#39;rect&#39;, // or any other types.

        // Translation, using [0, 0] by default.
        position: [100, 200],

        // Scale, using [1, 1] by default.
        scale: [2, 4],

        // Rotation, using 0 by default. Negative value means rotating clockwise.
        rotation: Math.PI / 4,

        // Origin point of rotation and scale, using [0, 0] by default.
        origin: [10, 20],

        shape: {
            // ...
        }
    }
    </code></pre>
    <p>Each element is transformed in the coordinate system of its parent, namely, transform of a element and its parent can be &quot;stacked&quot;.</p>
    <p>Transformation is performed by this order:</p>
    <ol>
    <li>Translate [-el.origin[0], -el.origin[1]].</li>
    <li>Scale according to el.scale.</li>
    <li>Rotate according to el.rotation.</li>
    <li>Translate back according to el.origin.</li>
    <li>Translate according to el.position.</li>
    </ol>
    <p>Namely, scaling and rotating firstly, and then translate. By this mechanism, translation does not affect origin of scale and rotation.</p>
    <p><strong>Relatively Positioning</strong></p>
    <p>In real application, size of a container is always not fixed. So mechanism of relative position is required. In <code class="codespan">graphic</code> component, <a href="#graphic.elements.left">left</a> / <a href="#graphic.elements.right">right</a> / <a href="#graphic.elements.top">top</a> / <a href="#graphic.elements.bottom">bottom</a> / <a href="#graphic.elements.width">width</a> / <a href="#graphic.elements.height">height</a> are used to position element relatively.</p>
    <p>For example:</p>
    <pre><code class="lang-javascript">{ // Position the image at the bottom center of its container.
        type: &#39;image&#39;,
        left: &#39;center&#39;, // Position at the center horizontally.
        bottom: &#39;10%&#39;,  // Position beyond the bottom boundary 10%.
        style: {
            image: &#39;http://example.website/a.png&#39;,
            width: 45,
            height: 45
        }
    },
    { // Position the entire rotated group at the right-bottom corner of its container.
        type: &#39;group&#39;,
        right: 0,  // Position at the right boundary.
        bottom: 0, // Position at the bottom boundary.
        rotation: Math.PI / 4,
        children: [
            {
                type: &#39;rect&#39;,
                left: &#39;center&#39;, // Position at horizontal center according to its parent.
                top: &#39;middle&#39;,  // Position at vertical center according to its parent.
                shape: {
                    width: 190,
                    height: 90
                },
                style: {
                    fill: &#39;#fff&#39;,
                    stroke: &#39;#999&#39;,
                    lineWidth: 2,
                    shadowBlur: 8,
                    shadowOffsetX: 3,
                    shadowOffsetY: 3,
                    shadowColor: &#39;rgba(0,0,0,0.3)&#39;
                }
            },
            {
                type: &#39;text&#39;,
                left: &#39;center&#39;, // Position at horizontal center according to its parent.
                top: &#39;middle&#39;,  // Position at vertical center according to its parent.
                style: {
                    fill: &#39;#777&#39;,
                    text: [
                        &#39;This is text&#39;,
                        &#39;This is text&#39;,
                        &#39;Print some text&#39;
                    ].join(&#39;\n&#39;),
                    font: &#39;14px Microsoft YaHei&#39;
                }
            }
        ]
    }
    </code></pre>
    <p>Note, <a href="graphic.elements.bounding" target="_blank">bounding</a> can be used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    elements: Optional[
        List[
            Union[
                Element,
                Element1,
                Element2,
                Element3,
                Element4,
                Element5,
                Element6,
                Element7,
                Element8,
                Element9,
                Element10,
                Element11,
            ]
        ]
    ] = Field(
        None,
        description='<p>A list of all graphic elements.</p>\n<p>Note, the standard configuration of graphic component is:</p>\n<pre><code class="lang-javascript">{\n    graphic: {\n        elements: [\n            {type: &#39;rect&#39;, ...}, {type: &#39;circle&#39;, ...}, ...\n        ]\n    }\n}\n</code></pre>\n<p>But we always use short patterns for convenience:</p>\n<pre><code class="lang-javascript">{\n    graphic: { // Declare only one graphic element.\n        type: &#39;rect&#39;,\n        ...\n    }\n}\n</code></pre>\n<p>Or:</p>\n<pre><code class="lang-javascript">{\n    graphic: [ // Declare multiple graphic elements.\n        {type: &#39;rect&#39;, ...}, {type: &#39;circle&#39;, ...}, ...\n    ]\n}\n</code></pre>\n',
    )


class LineStyle50(BaseModel):
    color: Optional[Any] = Field(
        '#000',
        description='\n\n<p>splitLineLine 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',
    )
    width: Optional[float] = Field(1, description='\n\n<p>splitLine line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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<p>Examples:</p>\n<pre><code class="lang-ts">calendar: [{\n    splitLine: {\n        show: true,\n        lineStyle: {\n            color: &#39;#000&#39;,\n            width: 1,\n            type: &#39;solid&#39;\n        }\n    }\n}]\n</code></pre>\n',
    )


class SplitLine6(BaseModel):
    """
    <p>Calendar coordinates splitLine style.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent the splitLine from showing</p>\n',
    )
    lineStyle: Optional[LineStyle50] = Field(None, description='')


class ItemStyle13(BaseModel):
    """
    <p>Every rect style in calendar coordinates.</p>

    """

    color: Optional[Any] = Field(
        '#fff',
        description='\n\n<p>calendar 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',
    )
    borderColor: Optional[Any] = Field(
        '#ccc',
        description='\n\n<p>calendar border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\n\n<p>calendar border width. No border when it is set to be 0.</p>\n<p>calendar border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>calendar 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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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<p>Examples:</p>\n<pre><code class="lang-ts">calendar: [{\n    itemStyle: {\n        color: &#39;#fff&#39;,\n        borderWidth: 1,\n        borderColor: &#39;#ccc&#39;\n    }\n}]\n</code></pre>\n',
    )


class _StyleName38(_StyleName):
    pass


class Rich38(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName38] = Field(
        None, alias='<style_name>', description=''
    )


class DayLabel(BaseModel):
    """
    <p>Day style in calendar coordinates.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent dayLabel from showing.</p>\n',
    )
    firstDay: Optional[float] = Field(
        0,
        description='\n\n<p>A week from the beginning of the week, the default starting on Sunday.</p>\n<p>Examples:</p>\n<pre><code class="lang-ts">\ncalendar: [{\n    dayLabel: {\n        firstDay: 1 // start on Monday\n    }\n}]\n\n</code></pre>\n',
    )
    margin: Optional[float] = Field(
        0,
        description='\n\n<p>The margin between the day label and the axis line.</p>\n',
    )
    position: Optional[str] = Field(
        'start',
        description='\n\n<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;start&#39;</li>\n<li>&#39;end&#39;</li>\n</ul>\n',
    )
    nameMap: Optional[Union[str, Any]] = Field(
        None,
        description='\n\n<p>Week text content, defaults to &#39;en&#39;. Since <code class="codespan">v5.2.2</code>, it defaults to the specified <code class="codespan">locale</code> name when <a href="api.html#echarts.init" target="_blank">initializing charts</a>. If not specified, it defaults to the auto-detected locale by the browser language.</p>\n<p>It supports Chinese(<code class="codespan">cn</code>), English(<code class="codespan">en</code>), and customized array. Since <code class="codespan">v5.2.2</code>, it also supports any built-in(<code class="codespan">EN</code>/<code class="codespan">ZH</code>) or other registered locale names (case-sensitive).</p>\n<p>The index <code class="codespan">0</code> always means <code class="codespan">Sunday</code>.</p>\n<p>Examples:</p>\n<pre><code class="lang-ts">\n// Before v5.2.2\n\n// shortcut to English  [&#39;S&#39;, &#39;M&#39;, &#39;T&#39;, &#39;W&#39;, &#39;T&#39;, &#39;F&#39;, &#39;S&#39;],\nnameMap: &#39;en&#39;,\n// shortcut to Chinese [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;]\nnameMap: &#39;cn&#39;,\n\n// Since v5.2.2\n\n// shortcut to English  [&#39;S&#39;, &#39;M&#39;, &#39;T&#39;, &#39;W&#39;, &#39;T&#39;, &#39;F&#39;, &#39;S&#39;],\nnameMap: &#39;EN&#39;,\n// shortcut to Chinese [&#39;日&#39;, &#39;一&#39;, &#39;二&#39;, &#39;三&#39;, &#39;四&#39;, &#39;五&#39;, &#39;六&#39;]\nnameMap: &#39;ZH&#39;,\n\n// Customized: mixed in English and Chinese or not displayed\nnameMap: [&#39;S&#39;, &#39;一&#39;, &#39;T&#39;, &#39;三&#39;, &#39;&#39;, &#39;五&#39;, &#39;S&#39;],\n\ncalendar: [{\n    dayLabel: {\n        // nameMap: &#39;en&#39; // Before v5.2.2\n        nameMap: &#39;EN&#39;    // Since v5.2.2\n    }\n}]\n</code></pre>\n',
    )
    color: Optional[Any] = Field('#000', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich38] = Field(
        None,
        description='<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',
    )


class _StyleName39(_StyleName):
    pass


class Rich39(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName39] = Field(
        None, alias='<style_name>', description=''
    )


class MonthLabel(BaseModel):
    """
    <p>Month label in calendar coordinates.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to prevent monthLabel from showing.</p>\n',
    )
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    margin: Optional[float] = Field(
        5,
        description='\n\n<p>The margin between the month label and the axis line.</p>\n',
    )
    position: Optional[str] = Field(
        'start',
        description='\n\n<p>Position of week, at the beginning or end of the range.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;start&#39;</li>\n<li>&#39;end&#39;</li>\n</ul>\n',
    )
    nameMap: Optional[Union[str, Any]] = Field(
        None,
        description='\n\n<p>Month text content, defaults to &#39;en&#39;. Since <code class="codespan">v5.2.2</code>, it defaults to the specified <code class="codespan">locale</code> name when <a href="api.html#echarts.init" target="_blank">initializing charts</a>. If not specified, it defaults to the auto-detected locale by the browser language.</p>\n<p>It supports Chinese(<code class="codespan">cn</code>), English(<code class="codespan">en</code>), and customized array. Since <code class="codespan">v5.2.2</code>, it also supports any built-in(<code class="codespan">EN</code>/<code class="codespan">ZH</code>) or other registered locale names (case-sensitive).</p>\n<p>The index <code class="codespan">0</code> always means <code class="codespan">Jan</code>.</p>\n<p>Examples:</p>\n<pre><code class="lang-ts">\n// Before v5.2.2\n\n// Shortcut to English\n// [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;,&#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;]\nnameMap: &#39;en&#39;,\n// Shortcut to Chinese\n// [&#39;一月&#39;, &#39;二月&#39;, &#39;三月&#39;, &#39;四月&#39;, &#39;五月&#39;, &#39;六月&#39;, &#39;七月&#39;, &#39;八月&#39;, &#39;九月&#39;, &#39;十月&#39;, &#39;十一月&#39;, &#39;十二月&#39;]\nnameMap: &#39;cn&#39;,\n\n// Since v5.2.2\n\n// Shortcut to English\n// [&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;,&#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, &#39;Jul&#39;, &#39;Aug&#39;, &#39;Sep&#39;, &#39;Oct&#39;, &#39;Nov&#39;, &#39;Dec&#39;]\nnameMap: &#39;EN&#39;,\n// Shortcut to Chinese\n// [&#39;1月&#39;, &#39;2月&#39;, &#39;3月&#39;, &#39;4月&#39;, &#39;5月&#39;, &#39;6月&#39;, &#39;7月&#39;, &#39;8月&#39;, &#39;9月&#39;, &#39;10月&#39;, &#39;11月&#39;, &#39;12月&#39;]\nnameMap: &#39;ZH&#39;,\n\n// Customized settings: mixed in English, Chinese, Russian or not displayed\nnameMap: [\n    &#39;一月&#39;, &#39;Feb&#39;, &#39;三月&#39;,\n    &#39;四月&#39;, &#39;May&#39;, &#39;六月&#39;,\n    &#39;Июль&#39;, &#39;八月&#39;, &#39;&#39;,\n    &#39;十月&#39;, &#39;Nov&#39;, &#39;十二月&#39;\n],\n\ncalendar: [{\n    monthLabel: {\n        // nameMap: &#39;en&#39; // Before v5.2.2\n        nameMap: &#39;EN&#39;    // Since v5.2.2\n    }\n}]\n</code></pre>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of month text label, which supports string template and callback function.</p>\n<p>Examples:</p>\n<pre><code class="lang-ts">// Use string template; eg: 2017-02\n/*\n    template variables:\n    {nameMap} default nameMap eg：&#39;Feb&#39;\n    {yyyy}   four-digit years eg: 2017\n    {yy}   two-digit years eg: 17\n    {MM}   two-digit month eg: 02\n    {M}   single-digit month eg: 2\n*/\nformatter: &#39;{yyyy}-{MM}&#39;\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg：&#39;Feb&#39;\n    param.yyyy   four-digit years eg: 2017\n    param.yy   two-digit years eg: 17\n    param.MM   two-digit month eg: 02\n    param.M   single-digit eg: 2\n*/\nformatter: function (param) {\n    // ...\n    return param.MM;\n}\n</code></pre>\n',
    )
    color: Optional[Any] = Field('#000', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich39] = Field(
        None,
        description='<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',
    )


class _StyleName40(_StyleName):
    pass


class Rich40(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName40] = Field(
        None, alias='<style_name>', description=''
    )


class YearLabel(BaseModel):
    """
    <p>Year label in calendar coordinates.</p>

    """

    show: Optional[bool] = Field(
        True,
        description='\n\n<p>Set this to <code class="codespan">false</code> to stop yearLabel from showing</p>\n',
    )
    margin: Optional[float] = Field(
        30,
        description='\n\n<p>The margin between the month label and the axis line.</p>\n',
    )
    position: Optional[str] = Field(
        None,
        description='\n\n<p>Position of year.</p>\n<p>Default:\nwhen orient is set as <code class="codespan">horizontal</code>, position is <code class="codespan">left</code>\nwhen orient is set as <code class="codespan">vertical</code>, position is <code class="codespan">top</code></p>\n<p>Options:</p>\n<ul>\n<li>&#39;top&#39;</li>\n<li>&#39;bottom&#39;</li>\n<li>&#39;left&#39;</li>\n<li>&#39;right&#39;</li>\n</ul>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Formatter of year text label, which supports string template and callback function.</p>\n<p>By default, the current range of the year, if the interval across the year, showing the first year and the last year</p>\n<p>Examples:</p>\n<pre><code class="lang-ts">// Use string template; eg: [&#39;2017-10-11&#39;, &#39;2018-01-21&#39;]\n/*\n    template variables:\n    {nameMap} default nameMap eg：&#39;2017-2018&#39;\n    {start}   start year eg: 2017\n    {end}   end year eg: 2018\n*/\n\nformatter: &#39;{start}-{end}&#39;\n\n// Use callback function;\n/*\n    function parameters:\n    param.nameMap default nameMap eg：&#39;2017-2018&#39;\n    param.start   start year eg: 2017\n    param.end   end year eg: 2018\n*/\nformatter: function (param) {\n    // ...\n    return param.end;\n}\n</code></pre>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich40] = Field(
        None,
        description='<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',
    )


class Calendar(BaseModel):
    """
        <p>Calendar coordinates.</p>
    <p>In ECharts, we are very creative to achieve the calendar chart, by using the calendar coordinates to achieve the calendar chart,
    as shown in the following example, we can use calendar coordinates in heatmap, scatter, effectScatter, and graph.</p>
    <p>Example of using heatmap in calendar coordinates:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=calendar-heatmap&edit=1&reset=1" width="800" height="400"></iframe>


    <p>Example of using effectScatter in calendar coordinates:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=calendar-effectscatter&edit=1&reset=1" width="800" height="600"></iframe>


    <p>Example of using graph in calendar coordinates:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=calendar-graph&edit=1&reset=1" width="600" height="600"></iframe>


    <p>By combining calendar coordinate system and charts, you may be able to create more wonderful effects.</p>
    <p><a href="http://localhost/echarts-website/examples/en/editor.html?c=calendar-lunar&amp;edit=1&amp;reset=1" target="_blank">Display Text in Calendar</a>,
    <a href="http://localhost/echarts-website/examples/en/editor.html?c=calendar-pie&amp;edit=1&amp;reset=1" target="_blank">Display Pies in Calendar</a></p>
    <hr>
    <p><strong>Calendar layout</strong></p>
    <p>Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So <a href="#calendar.orient">calendar.orient</a> can help in this case.</p>
    <hr>
    <p><strong>Adapt to container size</strong></p>
    <p>Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: <a href="#calendar.left">left</a> <a href="#calendar.right">right</a> <a href="#calendar.top">top</a> <a href="bottom" target="_blank">bottom</a> <a href="#calendar.width">width</a> <a href="#calendar.height">height</a>, which make calendar possible to modify its size according to container size. Besides, <a href="#calendar.cellSize">cellSize</a> can be specified to fix the size of each cell of calendar.</p>
    <hr>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        80,
        description='<p>Distance between calendar component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        60,
        description='<p>Distance between calendar component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between calendar component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between calendar component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    width: Optional[Union[float, str]] = Field(
        'auto',
        description='\n\n<p>The height of calendar coordinates.</p>\n<p>Note: <code class="codespan">cellSize</code> is 20 by default. If <code class="codespan">width</code> is set,\n  <code class="codespan">cellSize[0]</code> will be forced to <code class="codespan">auto</code>;</p>\n',
    )
    height: Optional[Union[float, str]] = Field(
        'auto',
        description='\n\n<p>The height of calendar coordinates.</p>\n<p>Note: <code class="codespan">cellSize</code> is 20 by default. If <code class="codespan">height</code> is set,\n  <code class="codespan">cellSize[1]</code> will be forced to <code class="codespan">auto</code>;</p>\n',
    )
    range: Optional[Union[float, str, Any]] = Field(
        None,
        description='<p>Required, range of Calendar coordinates, support multiple formats.</p>\n<p>Examples:</p>\n<pre><code class="lang-ts">\n// one year\nrange: 2017\n\n// one month\nrange: &#39;2017-02&#39;\n\n//  a range\nrange: [&#39;2017-01-02&#39;, &#39;2017-02-23&#39;]\n\n// note: they will be identified as [&#39;2017-01-01&#39;, &#39;2017-02-01&#39;]\nrange: [&#39;2017-01&#39;, &#39;2017-02&#39;]\n\n</code></pre>\n',
    )
    cellSize: Optional[Union[float, Any]] = Field(
        20,
        description='\n\n<p>The size of each rect of calendar coordinates, can be set to a single value or array, the first element is width and the second element is height.</p>\n<p>Support setting self-adaptation: <code class="codespan">auto</code>, the default width and height to be 20.</p>\n<p>Examples:</p>\n<pre><code class="lang-ts">\n// Set the width and height to be 20\ncellSize: 20\n\n// Set the width to be 20, and height to be 40\ncellSize: [20, 40]\n\n// Set width and height to be self-adaptation\ncellSize: [40]\n\n// Set the width and height to be 20\ncellSize: &#39;auto&#39;\n\n// Set the width to be self-adaptation, and height to be 40\ncellSize: [&#39;auto&#39;, 40]\n\n</code></pre>\n',
    )
    orient: Optional[str] = Field(
        'horizontal',
        description='\n\n<p>The layout orientation of calendar.</p>\n<p>Options:</p>\n<ul>\n<li>&#39;horizontal&#39;</li>\n<li>&#39;vertical&#39;</li>\n</ul>\n',
    )
    splitLine: Optional[SplitLine6] = Field(
        None, description='<p>Calendar coordinates splitLine style.</p>\n'
    )
    itemStyle: Optional[ItemStyle13] = Field(
        None, description='<p>Every rect style in calendar coordinates.</p>\n'
    )
    dayLabel: Optional[DayLabel] = Field(
        None, description='<p>Day style in calendar coordinates.</p>\n'
    )
    monthLabel: Optional[MonthLabel] = Field(
        None, description='<p>Month label in calendar coordinates.</p>\n'
    )
    yearLabel: Optional[YearLabel] = Field(
        None, description='<p>Year label in calendar coordinates.</p>\n'
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )


class TransformItem(BaseModel):
    type: Optional[str] = Field('filter', description='')
    config: Optional[Any] = Field(
        None,
        description='<p>The condition of transform &quot;filter&quot;.</p>\n<p>See the tutorial of <a href="tutorial.html#Data%20Transform" target="_blank">data transform</a>.</p>\n',
    )
    print: Optional[bool] = Field(
        False,
        description='<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code class="codespan">transform.print</code> might help in such case. (<code class="codespan">transform.print</code> is only available in dev environment).</p>\n<pre><code class="lang-ts">option = {\n    dataset: [{\n        source: [ ... ]\n    }, {\n        transform: {\n            type: &#39;filter&#39;,\n            config: { ... }\n            // The result of this transform will be printed\n            // in dev tool via `console.log`.\n            print: true\n        }\n    }],\n    ...\n}\n</code></pre>\n',
    )


class TransformItem1(BaseModel):
    type: Optional[str] = Field('sort', description='')
    config: Optional[Any] = Field(
        None,
        description='<p>The condition of transform &quot;sort&quot;.</p>\n<p>See the tutorial of <a href="tutorial.html#Data%20Transform" target="_blank">data transform</a>.</p>\n',
    )
    print: Optional[bool] = Field(
        False,
        description='<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code class="codespan">transform.print</code> might help in such case. (<code class="codespan">transform.print</code> is only available in dev environment).</p>\n<pre><code class="lang-ts">option = {\n    dataset: [{\n        source: [ ... ]\n    }, {\n        transform: {\n            type: &#39;filter&#39;,\n            config: { ... }\n            // The result of this transform will be printed\n            // in dev tool via `console.log`.\n            print: true\n        }\n    }],\n    ...\n}\n</code></pre>\n',
    )


class TransformItem2(BaseModel):
    """
        <p>Besides built-in transforms (like &#39;filter&#39;, &#39;sort&#39;), we can also use external transforms to provide more powerful functionalities.</p>
    <p>See the tutorial of <a href="tutorial.html#Data%20Transform" target="_blank">data transform</a>.</p>

    """

    type: Optional[str] = Field(
        'xxx:xxx',
        description='<p>Built-in transform has no namespace (like <code class="codespan">type: &#39;filter&#39;</code>, <code class="codespan">type: &#39;sort&#39;</code>).</p>\n<p>External transform has namespace (like <code class="codespan">type: &#39;ecStat:regression&#39;</code>).</p>\n',
    )
    config: Optional[Any] = Field(
        None,
        description='<p>The needed parameters of this data transform. Each type of transform has its own definition of <code class="codespan">config</code>.</p>\n',
    )
    print: Optional[bool] = Field(
        False,
        description='<p>When using data transform, we might run into the trouble that the final chart do not display correctly but we do not know where the config is wrong. There is a property <code class="codespan">transform.print</code> might help in such case. (<code class="codespan">transform.print</code> is only available in dev environment).</p>\n<pre><code class="lang-ts">option = {\n    dataset: [{\n        source: [ ... ]\n    }, {\n        transform: {\n            type: &#39;filter&#39;,\n            config: { ... }\n            // The result of this transform will be printed\n            // in dev tool via `console.log`.\n            print: true\n        }\n    }],\n    ...\n}\n</code></pre>\n',
    )


class Dataset(BaseModel):
    """
        <p><code class="codespan">dataset</code> component is published since ECharts 4. <code class="codespan">dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, it enables data encoding from data to visual, which brings convenience in some scenarios.</p>
    <p>More details about <code class="codespan">dataset</code> can be checked in the <a href="http://localhost/echarts-website/handbook/en/concepts/dataset/" target="_blank">tutorial</a>.</p>

    """

    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    source: Optional[Union[Any, Any]] = Field(
        None,
        description='<p>Source data. Generally speaking, a source data describe a table, where these format below can be applied:</p>\n<p>2d array, where <a href="#dataset.dimensions">dimension names</a> can be provided in the first row/column, or do not provide, only data.</p>\n<pre><code class="lang-ts">[\n    [&#39;product&#39;, &#39;2015&#39;, &#39;2016&#39;, &#39;2017&#39;],\n    [&#39;Matcha Latte&#39;, 43.3, 85.8, 93.7],\n    [&#39;Milk Tea&#39;, 83.1, 73.4, 55.1],\n    [&#39;Cheese Cocoa&#39;, 86.4, 65.2, 82.5],\n    [&#39;Walnut Brownie&#39;, 72.4, 53.9, 39.1]\n]\n</code></pre>\n<p>Row based key-value format (object array), where the keys indicate <a href="#dataset.dimensions">dimension names</a>.</p>\n<pre><code class="lang-ts">[\n    {product: &#39;Matcha Latte&#39;, count: 823, score: 95.8},\n    {product: &#39;Milk Tea&#39;, count: 235, score: 81.4},\n    {product: &#39;Cheese Cocoa&#39;, count: 1042, score: 91.2},\n    {product: &#39;Walnut Brownie&#39;, count: 988, score: 76.9}\n]\n</code></pre>\n<p>Column based key-value format, where each value represents a column of a table.</p>\n<pre><code class="lang-ts">{\n    &#39;product&#39;: [&#39;Matcha Latte&#39;, &#39;Milk Tea&#39;, &#39;Cheese Cocoa&#39;, &#39;Walnut Brownie&#39;],\n    &#39;count&#39;: [823, 235, 1042, 988],\n    &#39;score&#39;: [95.8, 81.4, 91.2, 76.9]\n}\n</code></pre>\n<p>More details about <code class="codespan">dataset</code> can be checked in the <a href="http://localhost/echarts-website/handbook/en/concepts/dataset/" target="_blank">tutorial</a>.</p>\n',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    sourceHeader: Optional[Union[bool, float]] = Field(
        None,
        description='<p>Whether the first row/column of <code class="codespan">dataset.source</code> represents <a href="#dataset.dimensions">dimension names</a>. Optional values:</p>\n<ul>\n<li><code class="codespan">null/undefined/&#39;auto&#39;</code>: means auto detect whether the first row/column is dimension names or data.</li>\n<li><code class="codespan">true</code>: the first row/column is dimension names.</li>\n<li><code class="codespan">false</code>: data start from the first row/column.</li>\n<li><code class="codespan">number</code>: means the row/column count of the dimension names, that is, the start index of data row/column. e.g. <code class="codespan">sourceHeader: 2</code> means the front two rows/columns are dimension names, the back ones are data.</li>\n</ul>\n<p>Note: <strong><em>the first row/column</em></strong> means that if <a href="#series.seriesLayoutBy">series.seriesLayoutBy</a> is set as <code class="codespan">&#39;column&#39;</code>, pick the first row, otherwise, if it is set as <code class="codespan">&#39;row&#39;</code>, pick the first column.</p>\n',
    )
    transform: Optional[
        List[Union[TransformItem, TransformItem1, TransformItem2]]
    ] = Field(
        None,
        description='<p>See the tutorial of <a href="tutorial.html#Data%20Transform" target="_blank">data transform</a>.</p>\n',
    )
    fromDatasetIndex: Optional[float] = Field(
        None,
        description='<p>Specify the input dataset for <a href="#dataset.transform">dataset.transform</a>.\nIf <a href="#dataset.transform">dataset.transform</a> specified but both <code class="codespan">fromDatasetIndex</code> and <code class="codespan">fromDatasetId</code> are not specified, <code class="codespan">fromDatasetIndex: 0</code> will be used by default.</p>\n<p>See the tutorial of <a href="tutorial.html#Data%20Transform" target="_blank">data transform</a>.</p>\n',
    )
    fromDatasetId: Optional[str] = Field(
        None,
        description='<p>Specify the input dataset for <a href="#dataset.transform">dataset.transform</a>.</p>\n<p>See the tutorial of <a href="tutorial.html#Data%20Transform" target="_blank">data transform</a>.</p>\n',
    )
    fromTransformResult: Optional[float] = Field(
        None,
        description='<p>If a <a href="#dataset.transform">dataset.transform</a> produces more than one result, we can use <code class="codespan">fromTransformResult</code> to retrieve some certain result.</p>\n<p>In most cases, <code class="codespan">fromTransformResult</code> do not need to be specified because most transforms only produce one result. If <code class="codespan">fromTransformResult</code> is not specified, we use <code class="codespan">fromTransformResult: 0</code> by default.</p>\n<p>See the tutorial of <a href="tutorial.html#Data%20Transform" target="_blank">data transform</a>.</p>\n',
    )


class General(BaseModel):
    """
    <p>For the overall description of the chart.</p>

    """

    withTitle: Optional[str] = Field(
        'This is a chart about "{title}".',
        description='<p>If the chart exists <a href="#title.text">title.text</a>, then <code class="codespan">withTitle</code> is used. This includes the template variable.</p>\n<ul>\n<li><code class="codespan">{title}</code>: will be replaced with <a href="#title.text">title.text</a> of the chart.</li>\n</ul>\n',
    )
    withoutTitle: Optional[str] = Field(
        'This is a chart,',
        description='<p>If the chart does not have <a href="#title.text">title.text</a>, then <code class="codespan">withoutTitle</code> is used.</p>\n',
    )


class Single(BaseModel):
    """
    <p>The description used when the chart contains only one series.</p>

    """

    prefix: Optional[str] = Field(
        '',
        description='<p>Holistic descriptions for all series are shown before each series description. This includes template variables.</p>\n<ul>\n<li><code class="codespan">{seriesCount}</code>: will be replaced with the number of series, where it is always 1.</li>\n</ul>\n',
    )
    withName: Optional[str] = Field(
        ' with type {seriesType} named {seriesName}.',
        description='<p>This description is used if the series has the <code class="codespan">name</code> attribute. This includes the template variable.</p>\n<ul>\n<li><code class="codespan">{seriesName}</code>: will be replaced with <code class="codespan">name</code> of the series.</li>\n<li><code class="codespan">{seriesType}</code>: the name of the type that will be replaced with the series, e.g. <code class="codespan">&#39;Bar chart&#39;</code>, <code class="codespan">&#39;Line chart&#39;</code>, etc.</li>\n</ul>\n',
    )
    withoutName: Optional[str] = Field(
        ' with type {seriesType}.',
        description='<p>This description is used if the series has no <code class="codespan">name</code> attribute. This includes the template variable.</p>\n<ul>\n<li><code class="codespan">{seriesType}</code>: the name of the type that will be replaced with the series, e.g. <code class="codespan">&#39;Bar chart&#39;</code>, <code class="codespan">&#39;Line chart&#39;</code>, etc.</li>\n</ul>\n',
    )


class Separator(BaseModel):
    """
    <p>The separator between the series and the description of the series.</p>

    """

    middle: Optional[str] = Field(
        ';', description='<p>Except for the separator after the last series.</p>\n'
    )
    end: Optional[str] = Field(
        '.', description='<p>Delimiter after the last series.</p>\n'
    )


class Multiple(BaseModel):
    """
    <p>Description to use when the chart contains only multiple series.</p>

    """

    prefix: Optional[str] = Field(
        '. It consists of {seriesCount} series count.',
        description='<p>A holistic description for all series is displayed before each series description. This includes the template variable.</p>\n<ul>\n<li><code class="codespan">{seriesCount}</code>: will be replaced with the number of series.</li>\n</ul>\n',
    )
    withName: Optional[str] = Field(
        ' The {seriesId} series is a {seriesType} representing {seriesName}.',
        description='<p>This description is used if the series has the <code class="codespan">name</code> attribute. This includes the template variable.</p>\n<ul>\n<li><code class="codespan">{seriesName}</code>: will be replaced with <code class="codespan">name</code> of the series.</li>\n<li><code class="codespan">{seriesType}</code>: the name of the type that will be replaced with the series, e.g. <code class="codespan">&#39;Bar chart&#39;</code>, <code class="codespan">&#39;Line chart&#39;</code>, etc.</li>\n</ul>\n',
    )
    withoutName: Optional[str] = Field(
        ' The {seriesId} series is a {seriesType}.',
        description='<p>This description is used if the series has no <code class="codespan">name</code> attribute. This includes the template variable.</p>\n<ul>\n<li><code class="codespan">{seriesType}</code>: the name of the type that will be replaced with the name of the series, e.g. <code class="codespan">&#39;Bar chart&#39;</code>, <code class="codespan">&#39;Line chart&#39;</code>, etc.</li>\n</ul>\n',
    )
    separator: Optional[Separator] = Field(
        None,
        description='<p>The separator between the series and the description of the series.</p>\n',
    )


class Series(BaseModel):
    """
    <p>series-related configuration items.</p>

    """

    maxCount: Optional[float] = Field(
        10, description='<p>The maximum number of series in the description.</p>\n'
    )
    single: Optional[Single] = Field(
        None,
        description='<p>The description used when the chart contains only one series.</p>\n',
    )
    multiple: Optional[Multiple] = Field(
        None,
        description='<p>Description to use when the chart contains only multiple series.</p>\n',
    )


class Separator1(BaseModel):
    """
    <p>The separator between data and data description.</p>

    """

    middle: Optional[str] = Field(
        ',', description='<p>The delimiter of the data except the last one.</p>\n'
    )
    end: Optional[str] = Field(
        '',
        description='<p>The delimiter after the last data.</p>\n<p>Note that usually the last series is followed by the series <code class="codespan">separator.end</code>, so <code class="codespan">data.separator.end</code> is an empty string in most cases.</p>\n',
    )


class Data(BaseModel):
    """
    <p>Data-related configuration items.</p>

    """

    maxCount: Optional[float] = Field(
        10,
        description='<p>The maximum number of data occurrences per series in the description.</p>\n',
    )
    allData: Optional[str] = Field(
        'whose data is --',
        description='<p>Description to be used when all data is displayed. This item <strong>doesn&#39;t</strong> make all the data displayed. It can be achieved by setting <a href="#aria.data.maxCount">aria.data.maxCount</a> to <code class="codespan">Number.MAX_VALUE</code>.</p>\n',
    )
    partialData: Optional[str] = Field(
        'where the first {displayCnt} term is --',
        description='<p>Descriptions used when only partial data is displayed. This includes template variables.</p>\n<ul>\n<li><code class="codespan">{displayCnt}</code>: the number of data that will be replaced with the number of displays.</li>\n</ul>\n',
    )
    withName: Optional[str] = Field(
        'The data for {name} is {value}',
        description='<p>This description is used if the data has the <code class="codespan">name</code> attribute. This includes the template variable.</p>\n<ul>\n<li><code class="codespan">{name}</code>: <code class="codespan">name</code> that will be replaced with the data.</li>\n<li><code class="codespan">{value}</code>: the value that will be replaced with the data.</li>\n</ul>\n',
    )
    withoutName: Optional[str] = Field(
        '{value}',
        description='<p>This description is used if the data does not have the <code class="codespan">name</code> attribute. This includes the template variable.</p>\n<ul>\n<li><code class="codespan">{value}</code>: the value that will be replaced with the data.</li>\n</ul>\n',
    )
    separator: Optional[Separator1] = Field(
        None, description='<p>The separator between data and data description.</p>\n'
    )


class Label21(BaseModel):
    """
        <p>If <a href="#aria.enabled">aria.enabled</a> is set to <code class="codespan">true</code>, <code class="codespan">label</code> is enabled by default. When enabled, the description of the chart will be automatically and intelligently generated based on the chart, data, title, etc. Users can also modify the description through the configuration item.</p>
    <p><strong>Example:</strong></p>
    <pre><code class="lang-ts">option = {
        aria: {
            // The following lines can be omitted because label.enabled defaults to true.
            // label: {
            // enabled: true
            // },
            enabled: true
        },
        title: {
            text: &#39;User access sources for a site&#39;,
            x: &#39;center&#39;
        },
        series: [
            {
                name: &#39;access source&#39;,
                type: &#39;pie&#39;,
                data: [
                    { value: 335, name: &#39;Direct Access&#39; },
                    { value: 310, name: &#39;Email Marketing&#39; },
                    { value: 234, name: &#39;Affiliate Ads&#39; },
                    { value: 135, name: &#39;Video Ads&#39; },
                    { value: 1548, name: &#39;Search Engine&#39; }
                ]
            }
        ]
    };
    </code></pre>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/aria-pie&edit=1&reset=1" width="700" height="300"></iframe>


    <p>On the generated chart DOM, there is an <code class="codespan">aria-label</code> attribute that allows the blind to understand the chart with the help of a reading device. Its value is.</p>
    <blockquote>
    <p>This is a chart of &quot;Source of user access to a site.&quot; The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.</p>
    </blockquote>
    <p>The basic process for generating the description is that if <a href="#aria.enabled">aria.enabled</a> is set to <code class="codespan">true</code> (not the default) and <a href="#aria.label.enabled">aria.label.enabled</a> is set to <code class="codespan">true</code> (the default), then the accessibility description is generated. Otherwise it is not generated. If <a href="#aria.label.description">aria.label.description</a> is defined, it is used as the full description of the chart, otherwise the description is generated according to the template stitching. We provide a default algorithm for generating descriptions, and only if the generated descriptions are not quite right, you need to modify these templates, or even override them completely with <code class="codespan">aria.label.description</code>.</p>
    <p>When using the template, whether <a href="#title.text">title.text</a> is used along with <a href="option.html#aria.label.general.withTitle" target="_blank">aria.label.general.withTitle</a> while <a href="option.html#aria.label.general.withoutTitle" target="_blank">aria.label.general.withoutTitle</a> is used if there is no title text. <code class="codespan">aria.general.withTitle</code> supports a template <code class="codespan">&#39;{title}&#39;</code>, which will be replaced with chart title. This means, if <code class="codespan">aria.general.withTitle</code> is set to be <code class="codespan">&#39;The chart title is {title}.&#39;</code> and the chart title is <code class="codespan">Price Distribution</code>, it will be interpreted into <code class="codespan">&#39;The chart title is Price Distribution.&#39;</code></p>
    <p>After generating the title, the description of the series (<a href="option.html#aria.label.series" target="_blank">aria.label.series</a>) and the description of the data for each series (<a href="option.html#aria.label.data" target="_blank">aria.label.data</a>) are generated in turn. The following is an example of a template. Likewise, each template may include template variables to replace actual values.</p>
    <p>The complete description generation process is:</p>
    <p><img width="800" height="auto" src="documents/asset/img/echarts-aria.jpg"></p>

    """

    enabled: Optional[bool] = Field(
        True,
        description='<p>Whether or not to enable label generation for accessibility. When enabled, the attribute <code class="codespan">aria-label</code> will be generated.</p>\n',
    )
    description: Optional[str] = Field(
        None,
        description='<p>By default, an algorithm is used to automatically generate a chart description, but if you want to fully customize it, you can set this value to a description. If it is set to <code class="codespan">&#39;This is a chart showing price changes&#39;</code>, then the value of the <code class="codespan">aria-label</code> attribute of the chart DOM is this string.</p>\n<p>This configuration item is often used to display text that specifies a general description of the chart, when displaying individual data does not show the contents of the chart. For example, if the chart is a map with a large number of scattered points, the default algorithm can only show the locations of the data points and cannot convey the author&#39;s intent as a whole. In this case, you can specify <code class="codespan">description</code> as what the author wants to say.</p>\n',
    )
    general: Optional[General] = Field(
        None, description='<p>For the overall description of the chart.</p>\n'
    )
    series: Optional[Series] = Field(
        None, description='<p>series-related configuration items.</p>\n'
    )
    data: Optional[Data] = Field(
        None, description='<p>Data-related configuration items.</p>\n'
    )


class Decals(Decal):
    """
    <p>The style of the decal pattern. If it is an <code class="codespan">Object</code> type, it means all data will have the same style, if it is an array, then each item in the array will have one style and the data will be looped through the array in order.</p>

    """

    pass


class Decal2(BaseModel):
    """
        <p>Decal patterns are added to series data as an additional hint other than colors to help differentiate the data. It is easy to enabled the default decal patterns by enabling it:</p>
    <pre><code>aria: {
        enabled: true,
        decal: {
            show: true
        }
    }
    </code></pre><iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/aria-decal-simple&edit=1&reset=1" width="700" height="300"></iframe>


    <p>Most series types are supported, including: <code class="codespan">&#39;line&#39;</code>, <code class="codespan">&#39;bar&#39;</code>, <code class="codespan">&#39;pie&#39;</code>, <code class="codespan">&#39;radar&#39;</code>, <code class="codespan">&#39;treemap&#39;</code>, <code class="codespan">&#39;sunburst&#39;</code>, <code class="codespan">&#39;boxplot&#39;</code>, <code class="codespan">&#39;sankey&#39;</code>, <code class="codespan">&#39;funnel&#39;</code>, <code class="codespan">&#39;gauge&#39;</code>, <code class="codespan">&#39;pictorialBar&#39;</code>, <code class="codespan">&#39;themeRiver&#39;</code>, <code class="codespan">&#39;custom&#39;</code> and so on. Among them, some series have no filling color by default (such as <code class="codespan">&#39;line&#39;</code>, <code class="codespan">&#39;radar&#39;</code>, <code class="codespan">&#39;boxplot&#39;</code>), which take effect only if the <code class="codespan">&#39;areaStyle&#39;</code> is set.</p>

    """

    show: Optional[bool] = Field(
        False,
        description='<p>Whether or not to display the decal pattern is not shown by default. If you want to display the applique, you need to make sure <a href="#aria.enabled">aria.enabled</a> and <code class="codespan">aria.decal.show</code> are both <code class="codespan">true</code>.</p>\n',
    )
    decals: Optional[Decals] = Field(
        None,
        description='<p>The style of the decal pattern. If it is an <code class="codespan">Object</code> type, it means all data will have the same style, if it is an array, then each item in the array will have one style and the data will be looped through the array in order.</p>\n',
    )


class Aria(BaseModel):
    """
        <p>The W3C has developed the <a href="https://www.w3.org/WAI/intro/aria" target="_blank">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite, which is dedicated to making web content and web applications accessible. Apache ECharts 4 complies with this specification by supporting the automatic generation of intelligent descriptions based on chart configuration items, allowing blind people to understand the chart content with the help of a reading device, making the chart accessible to a wider audience. In addition, Apache ECharts 5 adds support for applique textures as an auxiliary expression of color to further differentiate the data.</p>
    <p>It is turned off by default and needs to be turned on by setting <a href="#aria.enabled">aria.enabled</a> to <code class="codespan">true</code>.</p>

    """

    enabled: Optional[bool] = Field(
        False,
        description='<p>Whether or not aria is turned on. If not, the <code class="codespan">label</code> or <code class="codespan">decal</code> effect is not applied.</p>\n',
    )
    label: Optional[Label21] = Field(
        None,
        description='<p>If <a href="#aria.enabled">aria.enabled</a> is set to <code class="codespan">true</code>, <code class="codespan">label</code> is enabled by default. When enabled, the description of the chart will be automatically and intelligently generated based on the chart, data, title, etc. Users can also modify the description through the configuration item.</p>\n<p><strong>Example:</strong></p>\n<pre><code class="lang-ts">option = {\n    aria: {\n        // The following lines can be omitted because label.enabled defaults to true.\n        // label: {\n        // enabled: true\n        // },\n        enabled: true\n    },\n    title: {\n        text: &#39;User access sources for a site&#39;,\n        x: &#39;center&#39;\n    },\n    series: [\n        {\n            name: &#39;access source&#39;,\n            type: &#39;pie&#39;,\n            data: [\n                { value: 335, name: &#39;Direct Access&#39; },\n                { value: 310, name: &#39;Email Marketing&#39; },\n                { value: 234, name: &#39;Affiliate Ads&#39; },\n                { value: 135, name: &#39;Video Ads&#39; },\n                { value: 1548, name: &#39;Search Engine&#39; }\n            ]\n        }\n    ]\n};\n</code></pre>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/aria-pie&edit=1&reset=1" width="700" height="300"></iframe>\n\n\n<p>On the generated chart DOM, there is an <code class="codespan">aria-label</code> attribute that allows the blind to understand the chart with the help of a reading device. Its value is.</p>\n<blockquote>\n<p>This is a chart of &quot;Source of user access to a site.&quot; The chart type is a pie chart that indicates the source of the visit. The data is - direct access data is 335, mail marketing data is 310, union ad data is 234, video ad data is 135, search engine data is 1548.</p>\n</blockquote>\n<p>The basic process for generating the description is that if <a href="#aria.enabled">aria.enabled</a> is set to <code class="codespan">true</code> (not the default) and <a href="#aria.label.enabled">aria.label.enabled</a> is set to <code class="codespan">true</code> (the default), then the accessibility description is generated. Otherwise it is not generated. If <a href="#aria.label.description">aria.label.description</a> is defined, it is used as the full description of the chart, otherwise the description is generated according to the template stitching. We provide a default algorithm for generating descriptions, and only if the generated descriptions are not quite right, you need to modify these templates, or even override them completely with <code class="codespan">aria.label.description</code>.</p>\n<p>When using the template, whether <a href="#title.text">title.text</a> is used along with <a href="option.html#aria.label.general.withTitle" target="_blank">aria.label.general.withTitle</a> while <a href="option.html#aria.label.general.withoutTitle" target="_blank">aria.label.general.withoutTitle</a> is used if there is no title text. <code class="codespan">aria.general.withTitle</code> supports a template <code class="codespan">&#39;{title}&#39;</code>, which will be replaced with chart title. This means, if <code class="codespan">aria.general.withTitle</code> is set to be <code class="codespan">&#39;The chart title is {title}.&#39;</code> and the chart title is <code class="codespan">Price Distribution</code>, it will be interpreted into <code class="codespan">&#39;The chart title is Price Distribution.&#39;</code></p>\n<p>After generating the title, the description of the series (<a href="option.html#aria.label.series" target="_blank">aria.label.series</a>) and the description of the data for each series (<a href="option.html#aria.label.data" target="_blank">aria.label.data</a>) are generated in turn. The following is an example of a template. Likewise, each template may include template variables to replace actual values.</p>\n<p>The complete description generation process is:</p>\n<p><img width="800" height="auto" src="documents/asset/img/echarts-aria.jpg"></p>\n',
    )
    decal: Optional[Decal2] = Field(
        None,
        description='<p>Decal patterns are added to series data as an additional hint other than colors to help differentiate the data. It is easy to enabled the default decal patterns by enabling it:</p>\n<pre><code>aria: {\n    enabled: true,\n    decal: {\n        show: true\n    }\n}\n</code></pre><iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/aria-decal-simple&edit=1&reset=1" width="700" height="300"></iframe>\n\n\n<p>Most series types are supported, including: <code class="codespan">&#39;line&#39;</code>, <code class="codespan">&#39;bar&#39;</code>, <code class="codespan">&#39;pie&#39;</code>, <code class="codespan">&#39;radar&#39;</code>, <code class="codespan">&#39;treemap&#39;</code>, <code class="codespan">&#39;sunburst&#39;</code>, <code class="codespan">&#39;boxplot&#39;</code>, <code class="codespan">&#39;sankey&#39;</code>, <code class="codespan">&#39;funnel&#39;</code>, <code class="codespan">&#39;gauge&#39;</code>, <code class="codespan">&#39;pictorialBar&#39;</code>, <code class="codespan">&#39;themeRiver&#39;</code>, <code class="codespan">&#39;custom&#39;</code> and so on. Among them, some series have no filling color by default (such as <code class="codespan">&#39;line&#39;</code>, <code class="codespan">&#39;radar&#39;</code>, <code class="codespan">&#39;boxplot&#39;</code>), which take effect only if the <code class="codespan">&#39;areaStyle&#39;</code> is set.</p>\n',
    )


class _StyleName41(_StyleName3):
    pass


class Rich41(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName41] = Field(
        None, alias='<style_name>', description=''
    )


class Label22(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'top',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich41] = Field(
        None,
        description='<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',
    )


class _StyleName42(_StyleName3):
    pass


class Rich42(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName42] = Field(
        None, alias='<style_name>', description=''
    )


class EndLabel(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Label on the end of line.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich42] = Field(
        None,
        description='<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',
    )
    valueAnimation: Optional[bool] = Field(
        None, description='<p>Whether to enable text animation of value change.</p>\n'
    )


class LineStyle51(BaseModel):
    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(0, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class LabelLine(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle51] = Field(None, description='')


class LabelLayout(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    hideOverlap: Optional[bool] = Field(
        None,
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=graph-label-overlap&edit=1&reset=1" width="600" height="400"></iframe>\n\n',
    )
    moveOverlap: Optional[str] = Field(
        None,
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=scatter-label-align-right&edit=1&reset=1" width="600" height="400"></iframe>\n\n',
    )
    x: Optional[Union[float, str]] = Field(
        None,
        description='<p>The x position of the label. Support absolute pixel values \u200b\u200bor relative values \u200b\u200bsuch as <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    y: Optional[Union[float, str]] = Field(
        None,
        description='<p>The y position of the label. Support absolute pixel values \u200b\u200bor relative values \u200b\u200bsuch as <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    dx: Optional[float] = Field(
        None,
        description='<p>The pixel offset of the label in the x direction. Can be used with <code class="codespan">x</code>.</p>\n',
    )
    dy: Optional[float] = Field(
        None,
        description='<p>The pixel offset of the label in the y direction. Can be used with <code class="codespan">y</code></p>\n',
    )
    rotate: Optional[float] = Field(None, description='<p>Label rotation angle.</p>\n')
    width: Optional[float] = Field(
        None,
        description='<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',
    )
    height: Optional[float] = Field(
        None, description='<p>The height of displayed label.</p>\n'
    )
    align: Optional[str] = Field(
        None,
        description='<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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='<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',
    )
    fontSize: Optional[float] = Field(
        None, description='<p>The text size of the label.</p>\n'
    )
    draggable: Optional[bool] = Field(
        None,
        description='<p>Whether to allow the user to adjust the position by dragging.</p>\n',
    )
    labelLinePoints: Optional[Any] = Field(
        None,
        description='<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',
    )


class Decal3(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>
    <p>It works only if <code class="codespan">areaStyle</code> is set.</p>

    """

    pass


class ItemStyle14(BaseModel):
    """
    <p>The style of the symbol point of broken line.</p>

    """

    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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<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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal3] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n<p>It works only if <code class="codespan">areaStyle</code> is set.</p>\n',
    )


class LineStyle52(BaseModel):
    """
    <p>Line style.</p>

    """

    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(2, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AreaStyle8(BaseModel):
    """
    <p>The style of area.</p>

    """

    color: Optional[Any] = Field(
        '"#000"',
        description='\n\n<p>Fill 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',
    )
    origin: Optional[Union[str, float]] = Field(
        'auto',
        description='\n\n<p>Origin position of area.</p>\n<p>By default, the area between axis line and data will be filled. This config enables you to fill the area from data to the max or min of the axis data or a specified value.</p>\n<p>Valid values:</p>\n<ul>\n<li><code class="codespan">&#39;auto&#39;</code> to fill between axis line and data (<strong>Default</strong>)</li>\n<li><code class="codespan">&#39;start&#39;</code> to fill between min axis value (when not <a href="#yAxis.inverse"><code class="codespan">inverse</code></a>) and data</li>\n<li><code class="codespan">&#39;end&#39;</code> to fill between max axis value (when not <a href="#yAxis.inverse"><code class="codespan">inverse</code></a>) and data</li>\n<li><code class="codespan">number</code> to fill between specified value and data (Since <code class="codespan">v5.3.2</code>)</li>\n</ul>\n',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.7,
        description='\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',
    )


class _StyleName43(_StyleName3):
    pass


class Rich43(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName43] = Field(
        None, alias='<style_name>', description=''
    )


class Label23(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich43] = Field(
        None,
        description='<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',
    )


class LineStyle53(LineStyle51):
    pass


class LabelLine1(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle53] = Field(None, description='')


class ItemStyle15(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Since 5.2.0, it can be 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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class LineStyle54(BaseModel):
    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(2, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AreaStyle9(BaseModel):
    color: Optional[Any] = Field(
        '"#000"',
        description='\n\n<p>Fill 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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName44(_StyleName3):
    pass


class Rich44(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName44] = Field(
        None, alias='<style_name>', description=''
    )


class EndLabel1(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich44] = Field(
        None,
        description='<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',
    )


class Emphasis11(BaseModel):
    """
    <p>Highlight style of the graphic.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    scale: Optional[Union[bool, float]] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to scale to highlight the data in emphasis state. <code class="codespan">number</code> has been supported since <code class="codespan">v5.3.2</code>, the default scale value is 1.1.</p>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label23] = Field(None, description='')
    labelLine: Optional[LabelLine1] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle15] = Field(None, description='')
    lineStyle: Optional[LineStyle54] = Field(None, description='')
    areaStyle: Optional[AreaStyle9] = Field(None, description='')
    endLabel: Optional[EndLabel1] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class _StyleName45(_StyleName3):
    pass


class Rich45(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName45] = Field(
        None, alias='<style_name>', description=''
    )


class Label24(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich45] = Field(
        None,
        description='<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',
    )


class LineStyle55(LineStyle51):
    pass


class LabelLine2(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle55] = Field(None, description='')


class ItemStyle16(HandleStyle1):
    pass


class LineStyle56(LineStyle52):
    pass


class AreaStyle10(AreaStyle9):
    pass


class _StyleName46(_StyleName3):
    pass


class Rich46(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName46] = Field(
        None, alias='<style_name>', description=''
    )


class EndLabel2(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich46] = Field(
        None,
        description='<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',
    )


class Blur2(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-line.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    label: Optional[Label24] = Field(None, description='')
    labelLine: Optional[LabelLine2] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle16] = Field(None, description='')
    lineStyle: Optional[LineStyle56] = Field(None, description='')
    areaStyle: Optional[AreaStyle10] = Field(None, description='')
    endLabel: Optional[EndLabel2] = Field(None, description='')


class _StyleName47(_StyleName3):
    pass


class Rich47(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName47] = Field(
        None, alias='<style_name>', description=''
    )


class Label25(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich47] = Field(
        None,
        description='<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',
    )


class LineStyle57(LineStyle51):
    pass


class LabelLine3(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle57] = Field(None, description='')


class ItemStyle17(HandleStyle1):
    pass


class LineStyle58(LineStyle52):
    pass


class AreaStyle11(AreaStyle9):
    pass


class _StyleName48(_StyleName3):
    pass


class Rich48(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName48] = Field(
        None, alias='<style_name>', description=''
    )


class EndLabel3(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich48] = Field(
        None,
        description='<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',
    )


class Select2(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-line.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label25] = Field(None, description='')
    labelLine: Optional[LabelLine3] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle17] = Field(None, description='')
    lineStyle: Optional[LineStyle58] = Field(None, description='')
    areaStyle: Optional[AreaStyle11] = Field(None, description='')
    endLabel: Optional[EndLabel3] = Field(None, description='')


class _StyleName49(_StyleName3):
    pass


class Rich49(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName49] = Field(
        None, alias='<style_name>', description=''
    )


class Label26(BaseModel):
    """
    <p>The style of the text of single data point.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'top',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich49] = Field(
        None,
        description='<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',
    )


class LineStyle59(LineStyle51):
    pass


class LabelLine4(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle59] = Field(None, description='')


class ItemStyle18(HandleStyle1):
    """
    <p>The style of the symbol of single data point.</p>

    """

    pass


class _StyleName50(_StyleName3):
    pass


class Rich50(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName50] = Field(
        None, alias='<style_name>', description=''
    )


class Label27(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich50] = Field(
        None,
        description='<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',
    )


class ItemStyle19(ItemStyle15):
    pass


class Emphasis12(BaseModel):
    """
    <p>Emphasis state of specified single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label27] = Field(None, description='')
    itemStyle: Optional[ItemStyle19] = Field(None, description='')


class _StyleName51(_StyleName3):
    pass


class Rich51(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName51] = Field(
        None, alias='<style_name>', description=''
    )


class Label28(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich51] = Field(
        None,
        description='<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',
    )


class ItemStyle20(HandleStyle1):
    pass


class Blur3(BaseModel):
    """
    <p>Blur state of specified single data.</p>

    """

    label: Optional[Label28] = Field(None, description='')
    itemStyle: Optional[ItemStyle20] = Field(None, description='')


class _StyleName52(_StyleName3):
    pass


class Rich52(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName52] = Field(
        None, alias='<style_name>', description=''
    )


class Label29(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich52] = Field(
        None,
        description='<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',
    )


class ItemStyle21(HandleStyle1):
    pass


class Select3(BaseModel):
    """
    <p>Select state of specified single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label29] = Field(None, description='')
    itemStyle: Optional[ItemStyle21] = Field(None, description='')


class TextStyle18(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip6(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle18] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum8(BaseModel):
    name: Optional[str] = Field(None, description='<p>The name of data item.</p>\n')
    value: Optional[float] = Field(
        None, description='<p>The value of a single data item.</p>\n'
    )
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    symbol: Optional[str] = Field(
        'circle',
        description='\n\n<p>Symbol of single data.</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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        4,
        description='\n\n<p>single data 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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate degree of single data 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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code 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',
    )
    label: Optional[Label26] = Field(
        None, description='<p>The style of the text of single data point.</p>\n'
    )
    labelLine: Optional[LabelLine4] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle18] = Field(
        None, description='<p>The style of the symbol of single data point.</p>\n'
    )
    emphasis: Optional[Emphasis12] = Field(
        None, description='<p>Emphasis state of specified single data.</p>\n'
    )
    blur: Optional[Blur3] = Field(
        None, description='<p>Blur state of specified single data.</p>\n'
    )
    select: Optional[Select3] = Field(
        None, description='<p>Select state of specified single data.</p>\n'
    )
    tooltip: Optional[Tooltip6] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class _StyleName53(_StyleName3):
    pass


class Rich53(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName53] = Field(
        None, alias='<style_name>', description=''
    )


class Label30(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich53] = Field(
        None,
        description='<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',
    )


class ItemStyle22(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName54(_StyleName3):
    pass


class Rich54(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName54] = Field(
        None, alias='<style_name>', description=''
    )


class Label31(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich54] = Field(
        None,
        description='<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',
    )


class ItemStyle23(HandleStyle1):
    pass


class Emphasis13(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label31] = Field(None, description='')
    itemStyle: Optional[ItemStyle23] = Field(None, description='')


class _StyleName55(_StyleName3):
    pass


class Rich55(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName55] = Field(
        None, alias='<style_name>', description=''
    )


class Label32(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich55] = Field(
        None,
        description='<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',
    )


class ItemStyle24(HandleStyle1):
    pass


class Blur4(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label32] = Field(None, description='')
    itemStyle: Optional[ItemStyle24] = Field(None, description='')


class ItemStyle25(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName56(_StyleName3):
    pass


class Rich56(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName56] = Field(
        None, alias='<style_name>', description=''
    )


class Label33(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich56] = Field(
        None,
        description='<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',
    )


class _StyleName57(_StyleName3):
    pass


class Rich57(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName57] = Field(
        None, alias='<style_name>', description=''
    )


class Label34(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich57] = Field(
        None,
        description='<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',
    )


class ItemStyle26(HandleStyle1):
    pass


class Emphasis14(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label34] = Field(None, description='')
    itemStyle: Optional[ItemStyle26] = Field(None, description='')


class Datum9(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Available when using <a href="#series-line.markPoint.data.type">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class="codespan">0</code> (xAxis, radiusAxis), <code class="codespan">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-line.markPoint.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle25] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label33] = Field(None, description='')
    emphasis: Optional[Emphasis14] = Field(None, description='')


class MarkPoint(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-line.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-line.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-line.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label30] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle22] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis13] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur4] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum9]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-line.markPoint.data.x">x</a>, <a href="#series-line.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-line.markPoint.data.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-line.markPoint.data.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-line.markPoint.data.valueIndex">valueIndex</a> or <a href="#series-line.markPoint.data.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName58(_StyleName3):
    pass


class Rich58(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName58] = Field(
        None, alias='<style_name>', description=''
    )


class Label35(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich58] = Field(
        None,
        description='<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',
    )


class LineStyle60(BaseModel):
    """
    <p>Mark line style.</p>

    """

    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(0, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    curveness: Optional[float] = Field(
        0,
        description='\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n',
    )


class _StyleName59(_StyleName3):
    pass


class Rich59(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName59] = Field(
        None, alias='<style_name>', description=''
    )


class Label36(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich59] = Field(
        None,
        description='<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',
    )


class LineStyle61(LineStyle51):
    pass


class Emphasis15(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label36] = Field(None, description='')
    lineStyle: Optional[LineStyle61] = Field(None, description='')


class _StyleName60(_StyleName3):
    pass


class Rich60(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName60] = Field(
        None, alias='<style_name>', description=''
    )


class Label37(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich60] = Field(
        None,
        description='<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',
    )


class LineStyle62(LineStyle51):
    pass


class Blur5(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label37] = Field(None, description='')
    lineStyle: Optional[LineStyle62] = Field(None, description='')


class LineStyle63(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName61(_StyleName3):
    pass


class Rich61(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName61] = Field(
        None, alias='<style_name>', description=''
    )


class Label38(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich61] = Field(
        None,
        description='<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',
    )


class LineStyle64(LineStyle60):
    pass


class _StyleName62(_StyleName3):
    pass


class Rich62(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName62] = Field(
        None, alias='<style_name>', description=''
    )


class Label39(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich62] = Field(
        None,
        description='<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',
    )


class Emphasis16(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle64] = Field(None, description='')
    label: Optional[Label39] = Field(None, description='')


class LineStyle65(LineStyle60):
    pass


class _StyleName63(_StyleName3):
    pass


class Rich63(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName63] = Field(
        None, alias='<style_name>', description=''
    )


class Label40(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich63] = Field(
        None,
        description='<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',
    )


class Blur6(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle65] = Field(None, description='')
    label: Optional[Label40] = Field(None, description='')


class Field0(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-line.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-line.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle63] = Field(
        None,
        description='<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',
    )
    label: Optional[Label38] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis16] = Field(None, description='')
    blur: Optional[Blur6] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle66(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName64(_StyleName3):
    pass


class Rich64(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName64] = Field(
        None, alias='<style_name>', description=''
    )


class Label41(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich64] = Field(
        None,
        description='<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',
    )


class LineStyle67(LineStyle60):
    pass


class _StyleName65(_StyleName3):
    pass


class Rich65(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName65] = Field(
        None, alias='<style_name>', description=''
    )


class Label42(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich65] = Field(
        None,
        description='<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',
    )


class Emphasis17(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle67] = Field(None, description='')
    label: Optional[Label42] = Field(None, description='')


class LineStyle68(LineStyle60):
    pass


class _StyleName66(_StyleName3):
    pass


class Rich66(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName66] = Field(
        None, alias='<style_name>', description=''
    )


class Label43(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich66] = Field(
        None,
        description='<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',
    )


class Blur7(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle68] = Field(None, description='')
    label: Optional[Label43] = Field(None, description='')


class Field1(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-line.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-line.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle66] = Field(
        None,
        description='<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',
    )
    label: Optional[Label41] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis17] = Field(None, description='')
    blur: Optional[Blur7] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data1(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-line.markLine.data.0.x">x</a>, <a href="#series-line.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <ol start="2">
    <li><p>Assign coordinate position with <a href="#series-line.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>
    </li>
    <li><p>Use <a href="#series-line.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-line.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-line.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>
    </li>
    <li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>
    </li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>
    <pre><code>data: [

    {
            name: &#39;average line&#39;,
            // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported
            type: &#39;average&#39;
        },
        {
            name: &#39;Horizontal line with Y value at 100&#39;,
            yAxis: 100
        },
        [
            {
                // Use the same name with starting and ending point
                name: &#39;Minimum to Maximum&#39;,
                type: &#39;min&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],
    [
            {
                name: &#39;Markline between two points&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [{
            // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
            yAxis: &#39;max&#39;,
            x: &#39;90%&#39;
        }, {
            type: &#39;max&#39;
        }],
    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field0] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field1] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-line.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label35] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle60] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis15] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur5] = Field(
        None,
        description='<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',
    )
    data: Optional[Data1] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-line.markLine.data.0.x">x</a>, <a href="#series-line.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-line.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-line.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-line.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-line.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>\n<pre><code>data: [\n\n{\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n[\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName67(_StyleName3):
    pass


class Rich67(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName67] = Field(
        None, alias='<style_name>', description=''
    )


class Label44(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich67] = Field(
        None,
        description='<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',
    )


class ItemStyle27(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName68(_StyleName3):
    pass


class Rich68(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName68] = Field(
        None, alias='<style_name>', description=''
    )


class Label45(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich68] = Field(
        None,
        description='<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',
    )


class ItemStyle28(HandleStyle1):
    pass


class Emphasis18(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label45] = Field(None, description='')
    itemStyle: Optional[ItemStyle28] = Field(None, description='')


class _StyleName69(_StyleName3):
    pass


class Rich69(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName69] = Field(
        None, alias='<style_name>', description=''
    )


class Label46(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich69] = Field(
        None,
        description='<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',
    )


class ItemStyle29(HandleStyle1):
    pass


class Blur8(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label46] = Field(None, description='')
    itemStyle: Optional[ItemStyle29] = Field(None, description='')


class ItemStyle30(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName70(_StyleName3):
    pass


class Rich70(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName70] = Field(
        None, alias='<style_name>', description=''
    )


class Label47(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich70] = Field(
        None,
        description='<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',
    )


class ItemStyle31(HandleStyle1):
    pass


class _StyleName71(_StyleName3):
    pass


class Rich71(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName71] = Field(
        None, alias='<style_name>', description=''
    )


class Label48(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich71] = Field(
        None,
        description='<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',
    )


class Emphasis19(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle31] = Field(None, description='')
    label: Optional[Label48] = Field(None, description='')


class ItemStyle32(HandleStyle1):
    pass


class _StyleName72(_StyleName3):
    pass


class Rich72(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName72] = Field(
        None, alias='<style_name>', description=''
    )


class Label49(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich72] = Field(
        None,
        description='<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',
    )


class Blur9(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle32] = Field(None, description='')
    label: Optional[Label49] = Field(None, description='')


class Field01(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-line.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-line.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle30] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label47] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis19] = Field(None, description='')
    blur: Optional[Blur9] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle33(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName73(_StyleName3):
    pass


class Rich73(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName73] = Field(
        None, alias='<style_name>', description=''
    )


class Label50(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich73] = Field(
        None,
        description='<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',
    )


class ItemStyle34(HandleStyle1):
    pass


class _StyleName74(_StyleName3):
    pass


class Rich74(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName74] = Field(
        None, alias='<style_name>', description=''
    )


class Label51(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich74] = Field(
        None,
        description='<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',
    )


class Emphasis20(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle34] = Field(None, description='')
    label: Optional[Label51] = Field(None, description='')


class ItemStyle35(HandleStyle1):
    pass


class _StyleName75(_StyleName3):
    pass


class Rich75(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName75] = Field(
        None, alias='<style_name>', description=''
    )


class Label52(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich75] = Field(
        None,
        description='<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',
    )


class Blur10(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle35] = Field(None, description='')
    label: Optional[Label52] = Field(None, description='')


class Field11(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-line.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-line.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle33] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label50] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis20] = Field(None, description='')
    blur: Optional[Blur10] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data2(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-line.markArea.data.0.x">x</a>, <a href="#series-line.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <ol start="2">
    <li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using
    <a href="#series-line.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>
    </li>
    <li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-line.markArea.data.0.type">type</a>, where <a href="#series-line.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-line.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>
    </li>
    <li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [


        [
            {
                name: &#39;From average to max&#39;,
                type: &#39;average&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],

        [
            {
                name: &#39;Mark area between two points in data coordiantes&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [
            {
                name: &#39;From 60 to 80&#39;,
                yAxis: 60
            },
            {
                yAxis: 80
            }
        ], [
            {
                name: &#39;Mark area covers all data&#39;
                coord: [&#39;min&#39;, &#39;min&#39;]
            },
            {
                coord: [&#39;max&#39;, &#39;max&#39;]
            }
        ],
    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field01] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field11] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label44] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle27] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis18] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur8] = Field(
        None,
        description='<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',
    )
    data: Optional[Data2] = Field(
        None,
        description='<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-line.markArea.data.0.x">x</a>, <a href="#series-line.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>\n</ol>\n<ol start="2">\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href="#series-line.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n<li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-line.markArea.data.0.type">type</a>, where <a href="#series-line.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-line.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>\n</li>\n<li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    enabled: Optional[bool] = Field(
        False,
        description='<p>Wheather to enable the universal transition animation.</p>\n',
    )
    seriesKey: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    divideShape: Optional[str] = Field(
        None,
        description='<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',
    )
    delay: Optional[Any] = Field(
        None,
        description='<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',
    )


class TextStyle19(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip7(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle19] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series1(BaseModel):
    """
        <p><strong>broken line chart</strong></p>
    <p>Broken line chart relates all the data points <a href="#series-line.symbol">symbol</a> by broken lines, which is used to show the trend of data changing. It could be used in both <a href="#grid">rectangular coordinate</a> and<a href="#polar">polar coordinate</a>.</p>
    <p><strong>Tip:</strong> When <a href="#series-line.areaStyle">areaStyle</a> is set, area chart will be drawn.</p>
    <p><strong>Tip:</strong> With <a href="#visualMap-piecewise">visualMap</a> component, Broken line / area chart can have different colors on different sections, as below:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-aqi&edit=1&reset=1" width="600" height="400"></iframe>


    """

    type: Optional[str] = Field('line', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    coordinateSystem: Optional[str] = Field(
        'cartesian2d',
        description='<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-bar.xAxisIndex">xAxisIndex</a> and <a href="#series-bar.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href="#series-bar.polarIndex">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    polarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#polar">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'emptyCircle',
        description='\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-line.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        4,
        description='\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-line.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-line.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    showSymbol: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to show symbol. It would be shown during tooltip hover.</p>\n',
    )
    showAllSymbol: Optional[bool] = Field(
        'auto',
        description='\n\n<p>Only work when main axis is <code class="codespan">&#39;category&#39;</code> axis (<code class="codespan">axis.type</code> is <code class="codespan">&#39;category&#39;</code>). Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;auto&#39;</code>: Default value. Show all symbols if there is enough space. Otherwise follow the interval strategy with with <a href="#xAxis.axisLabel.interval">axisLabel.interval</a>.</li>\n<li><code class="codespan">true</code>: Show all symbols.</li>\n<li><code class="codespan">false</code>: Follow the interval strategy with <a href="#xAxis.axisLabel.interval">axisLabel.interval</a>.</li>\n</ul>\n',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    stack: Optional[str] = Field(
        None,
        description='<p>If stack the value. On the same category axis, the series with the same <code class="codespan">stack</code> name would be put on top of each other.</p>\n<p>See also <a href="#series-line.stackStrategy">stackStrategy</a> on how to customize how values are stacked.</p>\n<p>Notice: <code class="codespan">stack</code> only supports stacking on <code class="codespan">value</code> and <code class="codespan">log</code> axis for now. <code class="codespan">time</code> and <code class="codespan">category</code> axis are not supported.</p>\n<p>The effect of the below example could be seen through stack switching of <a href="#toolbox">toolbox</a> on the top right corner:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/line-stack-tiled&edit=1&reset=1" width="600" height="400"></iframe>\n\n',
    )
    stackStrategy: Optional[str] = Field(
        'samesign',
        description='<blockquote>\n<p>Since <code class="codespan">v5.3.3</code></p>\n</blockquote>\n<p>How to stack values if the <a href="#series-line.stack">stack</a> property has been set. Options:</p>\n<ul>\n<li><code class="codespan">&#39;samesign&#39;</code>: only stack values if the value to be stacked has the same sign as the currently cumulated stacked value.</li>\n<li><code class="codespan">&#39;all&#39;</code>: stack all values, irrespective of the signs of the current or cumulative stacked value.</li>\n<li><code class="codespan">&#39;positive&#39;</code>: only stack positive values.</li>\n<li><code class="codespan">&#39;negative&#39;</code>: only stack negative values.</li>\n</ul>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    connectNulls: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to connect the line across null points.</p>\n',
    )
    clip: Optional[bool] = Field(
        True,
        description='\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',
    )
    triggerLineEvent: Optional[bool] = Field(
        False,
        description='<blockquote>\n<p>Since <code class="codespan">v5.2.2</code></p>\n</blockquote>\n<p>Whether <code class="codespan">line</code> and <code class="codespan">area</code> can trigger the event.</p>\n',
    )
    step: Optional[Union[str, bool]] = Field(
        False,
        description='\n\n<p>Whether to show as a step line. It can be <code class="codespan">true</code>, <code class="codespan">false</code>. Or <code class="codespan">&#39;start&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, <code class="codespan">&#39;end&#39;</code>. Which will configure the turn point of step line.</p>\n<p>See the example using different <code class="codespan">step</code> options:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-step&edit=1&reset=1" width="600" height="400"></iframe>\n\n',
    )
    label: Optional[Label22] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    endLabel: Optional[EndLabel] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Label on the end of line.</p>\n',
    )
    labelLine: Optional[LabelLine] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    labelLayout: Optional[LabelLayout] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle14] = Field(
        None, description='<p>The style of the symbol point of broken line.</p>\n'
    )
    lineStyle: Optional[LineStyle52] = Field(None, description='<p>Line style.</p>\n')
    areaStyle: Optional[AreaStyle8] = Field(
        None, description='<p>The style of area.</p>\n'
    )
    emphasis: Optional[Emphasis11] = Field(
        None, description='<p>Highlight style of the graphic.</p>\n'
    )
    blur: Optional[Blur2] = Field(
        None,
        description='<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-line.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select2] = Field(
        None,
        description='<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-line.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='<p>Whether to show as smooth curve.</p>\n<p>If is typed in <code class="codespan">boolean</code>, then it means whether to enable smoothing. If is typed in <code class="codespan">number</code>, valued from 0 to 1, then it means smoothness. A smaller value makes it less smooth.</p>\n<p>Please refer to <a href="#series-line.smoothMonotone">smoothMonotone</a> to change smoothing algorithm.</p>\n',
    )
    smoothMonotone: Optional[str] = Field(
        None,
        description='<p>Whether the broken line keep the monotonicity when it is smoothed. It can be set as <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code> to keep the monotonicity on x axis or y axis.</p>\n<p>It is usually used on dual value axis.</p>\n<p>Here are 2 examples of broken line chart with dual value axis, showing the differences when <code class="codespan">smoothMonotone</code> is without any setting, and <code class="codespan">smoothMonotone</code> is set as <code class="codespan">&#39;x&#39;</code>.</p>\n<ul>\n<li>No setting about <code class="codespan">smoothMonotone</code>:</li>\n</ul>\n<p><img width="300" height="auto" src="documents/asset/img/smooth-monotone-none.png"></p>\n<ul>\n<li>It is set as <code class="codespan">&#39;x&#39;</code>:</li>\n</ul>\n<p><img width="300" height="auto" src="documents/asset/img/smooth-monotone-x.png"></p>\n',
    )
    sampling: Optional[str] = Field(
        None,
        description='<p>The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.</p>\n<p>Options:</p>\n<ul>\n<li><code class="codespan">&#39;lttb&#39;</code> Use Largest-Triangle-Three-Bucket algorithm to filter points. It will keep the trends and extremas.</li>\n<li><code class="codespan">&#39;average&#39;</code> Use average value of filter points</li>\n<li><code class="codespan">&#39;max&#39;</code> Use maximum value of filter points</li>\n<li><code class="codespan">&#39;min&#39;</code> Use minimum value of filter points</li>\n<li><code class="codespan">&#39;sum&#39;</code> Use sum of filter points</li>\n</ul>\n',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    seriesLayoutBy: Optional[str] = Field(
        'column',
        description='<p>When <a href="#dataset">dataset</a> is used, <code class="codespan">seriesLayoutBy</code> specifies whether the column or the row of <code class="codespan">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class="codespan">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：the rows of <code class="codespan">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href="http://localhost/echarts-website/examples/en/editor.html?c=dataset-series-layout-by" target="_blank">example</a>.</p>\n',
    )
    datasetIndex: Optional[float] = Field(
        0,
        description='<p>If <a href="#series.data">series.data</a> is not specified, and <a href="#dataset">dataset</a> exists, the series will use <code class="codespan">dataset</code>. <code class="codespan">datasetIndex</code> specifies which dataset will be used.</p>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum8]] = Field(
        None,
        description='<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class="codespan">data</code> specified in series, and there is <a href="#dataset">dataset</a> in option, series will use the first <a href="#dataset">dataset</a> as its datasource. If <code class="codespan">data</code> has been specified, <a href="#dataset">dataset</a> will not used.</p>\n<p><code class="codespan">series.datasetIndex</code> can be used to specify other <a href="#dataset">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class="lang-ts">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href="#grid">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#xAxis">xAxis</a> and <a href="#yAxis">yAxis</a> respectively.</li>\n<li>In <a href="#polar">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#radiusAxis">radiusAxis</a> and <a href="#angleAxis">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href="#visualMap">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href="#series.symbolSize">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href="#tooltip.formatter">tooltip.formatter</a> or <a href="#series.label.formatter">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class="codespan">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class="lang-ts">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href="#xAxis.type">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class="codespan">&#39;value&#39;</code> or <code class="codespan">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class="codespan">number</code> (like <code class="codespan">12</code>) (can also be a number in a <code class="codespan">string</code> format, like <code class="codespan">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class="codespan">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class="codespan">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class="lang-ts">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-punchCard" target="_blank">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class="codespan">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class="codespan">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15" target="_blank">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href="https://momentjs.com/" target="_blank">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class="codespan">&#39;2012-03&#39;</code>, <code class="codespan">&#39;2012-03-01&#39;</code>, <code class="codespan">&#39;2012-03-01 05&#39;</code>, <code class="codespan">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class="codespan">&quot;T&quot;</code> or a space: <code class="codespan">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class="codespan">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class="codespan">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class="codespan">&#39;2012&#39;</code>, <code class="codespan">&#39;2012-3-1&#39;</code>, <code class="codespan">&#39;2012/3/1&#39;</code>, <code class="codespan">&#39;2012/03/01&#39;</code>,\n<code class="codespan">&#39;2009/6/12 2:00&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href="https://dygraphs.com/date-formats.html" target="_blank">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class="codespan">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> and <code class="codespan">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class="codespan">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href="https://momentjs.com/" target="_blank">moment</a>), or use <code class="codespan">echarts.number.parseDate</code>, or check <a href="https://dygraphs.com/date-formats.html" target="_blank">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class="codespan">value</code> reprensent real value. For example:</p>\n<pre><code class="lang-ts">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class="codespan">&#39;-&#39;</code> or <code class="codespan">null</code> or <code class="codespan">undefined</code> or <code class="codespan">NaN</code> can be used to describe that a data item does not exist (ps：<em>not exist</em> does not means its value is <code class="codespan">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n',
    )
    markPoint: Optional[MarkPoint] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in Line.</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in Line, 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'linear',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip7] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class BackgroundStyle(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v4.7.0</code></p>
    </blockquote>
    <p>Background style of each bar if <a href="#series-bar.showBackground">showBackground</a> is set to be <code class="codespan">true</code>.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=bar-background&reset=1&edit=1" width="800" height="400"></iframe>




    """

    color: Optional[Any] = Field(
        'rgba(180, 180, 180, 0.2)',
        description='\n\n<p>Bar 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',
    )
    borderColor: Optional[Any] = Field(
        '#000', description='\n\n<p>The border color of bar.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>The border width of bar. defaults to have no border.</p>\n',
    )
    borderType: Optional[str] = Field(
        'solid',
        description='\n\n<p>Border type. Can be <code class="codespan">&#39;dashed&#39;</code>, <code class="codespan">&#39;dotted&#39;</code>.</p>\n',
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0,
        description='\n\n<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName76(_StyleName3):
    pass


class Rich76(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName76] = Field(
        None, alias='<style_name>', description=''
    )


class Label53(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich76] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle69(LineStyle51):
    pass


class LabelLine5(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle69] = Field(None, description='')


class Decal4(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle36(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Any] = Field(
        'auto',
        description='\n\n<p>Bar color. By default, colors from global palette <a href="#color">option.color</a> is used.</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',
    )
    borderColor: Optional[Any] = Field(
        '#000', description='\n\n<p>The border color of bar.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>The border width of bar. defaults to have no border.</p>\n',
    )
    borderType: Optional[str] = Field(
        'solid',
        description='\n\n<p>Border type. Can be <code class="codespan">&#39;dashed&#39;</code>, <code class="codespan">&#39;dotted&#39;</code>.</p>\n',
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0,
        description='\n\n<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal4] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class LabelLayout1(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class _StyleName77(_StyleName3):
    pass


class Rich77(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName77] = Field(
        None, alias='<style_name>', description=''
    )


class Label54(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich77] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle70(LineStyle51):
    pass


class LabelLine6(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle70] = Field(None, description='')


class ItemStyle37(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Any] = Field(
        'auto',
        description='\n\n<p>Bar 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',
    )
    borderColor: Optional[Any] = Field(
        '#000', description='\n\n<p>The border color of bar.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>The border width of bar. defaults to have no border.</p>\n',
    )
    borderType: Optional[str] = Field(
        'solid',
        description='\n\n<p>Border type. Can be <code class="codespan">&#39;dashed&#39;</code>, <code class="codespan">&#39;dotted&#39;</code>.</p>\n',
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0,
        description='\n\n<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class Emphasis21(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label54] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine6] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle37] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )


class _StyleName78(_StyleName3):
    pass


class Rich78(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName78] = Field(
        None, alias='<style_name>', description=''
    )


class Label55(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich78] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle71(LineStyle51):
    pass


class LabelLine7(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle71] = Field(None, description='')


class ItemStyle38(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Any] = Field(
        'auto',
        description='\n\n<p>Bar 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',
    )
    borderColor: Optional[Any] = Field(
        '#000', description='\n\n<p>The border color of bar.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>The border width of bar. defaults to have no border.</p>\n',
    )
    borderType: Optional[str] = Field(
        'solid',
        description='\n\n<p>Border type. Can be <code class="codespan">&#39;dashed&#39;</code>, <code class="codespan">&#39;dotted&#39;</code>.</p>\n',
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0,
        description='\n\n<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class Blur11(BaseModel):
    """
    <p>Configurations of blur state. Available when <a href="#series-bar.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    label: Optional[Label55] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine7] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle38] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )


class _StyleName79(_StyleName3):
    pass


class Rich79(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName79] = Field(
        None, alias='<style_name>', description=''
    )


class Label56(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich79] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle72(LineStyle51):
    pass


class LabelLine8(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle72] = Field(None, description='')


class ItemStyle39(ItemStyle38):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    pass


class Select4(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-bar.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label56] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine8] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle39] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )


class _StyleName80(_StyleName3):
    pass


class Rich80(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName80] = Field(
        None, alias='<style_name>', description=''
    )


class Label57(BaseModel):
    """
    <p>Label style configurations of single data.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich80] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle73(LineStyle51):
    pass


class LabelLine9(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle73] = Field(None, description='')


class Decal5(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle40(BaseModel):
    """
    <p>Rectangle style configurations of single data.</p>

    """

    color: Optional[Any] = Field(
        'auto',
        description='\n\n<p>Bar 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',
    )
    borderColor: Optional[Any] = Field(
        '#000', description='\n\n<p>The border color of bar.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>The border width of bar. defaults to have no border.</p>\n',
    )
    borderType: Optional[str] = Field(
        'solid',
        description='\n\n<p>Border type. Can be <code class="codespan">&#39;dashed&#39;</code>, <code class="codespan">&#39;dotted&#39;</code>.</p>\n',
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0,
        description='\n\n<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal5] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class _StyleName81(_StyleName3):
    pass


class Rich81(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName81] = Field(
        None, alias='<style_name>', description=''
    )


class Label58(BaseModel):
    """
    <p>Label style configurations of single data.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich81] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle74(LineStyle51):
    pass


class LabelLine10(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle74] = Field(None, description='')


class ItemStyle41(ItemStyle37):
    """
    <p>Rectangle style configurations of single data.</p>

    """

    pass


class Emphasis22(BaseModel):
    """
    <p>Emphasis state of single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label58] = Field(
        None, description='<p>Label style configurations of single data.</p>\n'
    )
    labelLine: Optional[LabelLine10] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle41] = Field(
        None, description='<p>Rectangle style configurations of single data.</p>\n'
    )


class _StyleName82(_StyleName3):
    pass


class Rich82(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName82] = Field(
        None, alias='<style_name>', description=''
    )


class Label59(BaseModel):
    """
    <p>Label style configurations of single data.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich82] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle75(LineStyle51):
    pass


class LabelLine11(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle75] = Field(None, description='')


class ItemStyle42(ItemStyle38):
    """
    <p>Rectangle style configurations of single data.</p>

    """

    pass


class Blur12(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of single data.</p>

    """

    label: Optional[Label59] = Field(
        None, description='<p>Label style configurations of single data.</p>\n'
    )
    labelLine: Optional[LabelLine11] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle42] = Field(
        None, description='<p>Rectangle style configurations of single data.</p>\n'
    )


class _StyleName83(_StyleName3):
    pass


class Rich83(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName83] = Field(
        None, alias='<style_name>', description=''
    )


class Label60(BaseModel):
    """
    <p>Label style configurations of single data.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich83] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle76(LineStyle51):
    pass


class LabelLine12(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle76] = Field(None, description='')


class ItemStyle43(ItemStyle38):
    """
    <p>Rectangle style configurations of single data.</p>

    """

    pass


class Select5(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label60] = Field(
        None, description='<p>Label style configurations of single data.</p>\n'
    )
    labelLine: Optional[LabelLine12] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle43] = Field(
        None, description='<p>Rectangle style configurations of single data.</p>\n'
    )


class Datum10(BaseModel):
    name: Optional[str] = Field(None, description='<p>The name of data item.</p>\n')
    value: Optional[float] = Field(
        None, description='<p>The value of a single data item.</p>\n'
    )
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    label: Optional[Label57] = Field(
        None, description='<p>Label style configurations of single data.</p>\n'
    )
    labelLine: Optional[LabelLine9] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle40] = Field(
        None, description='<p>Rectangle style configurations of single data.</p>\n'
    )
    emphasis: Optional[Emphasis22] = Field(
        None, description='<p>Emphasis state of single data.</p>\n'
    )
    blur: Optional[Blur12] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of single data.</p>\n',
    )
    select: Optional[Select5] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of single data.</p>\n',
    )


class _StyleName84(_StyleName3):
    pass


class Rich84(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName84] = Field(
        None, alias='<style_name>', description=''
    )


class Label61(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich84] = Field(
        None,
        description='<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',
    )


class ItemStyle44(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName85(_StyleName3):
    pass


class Rich85(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName85] = Field(
        None, alias='<style_name>', description=''
    )


class Label62(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich85] = Field(
        None,
        description='<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',
    )


class ItemStyle45(HandleStyle1):
    pass


class Emphasis23(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label62] = Field(None, description='')
    itemStyle: Optional[ItemStyle45] = Field(None, description='')


class _StyleName86(_StyleName3):
    pass


class Rich86(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName86] = Field(
        None, alias='<style_name>', description=''
    )


class Label63(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich86] = Field(
        None,
        description='<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',
    )


class ItemStyle46(HandleStyle1):
    pass


class Blur13(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label63] = Field(None, description='')
    itemStyle: Optional[ItemStyle46] = Field(None, description='')


class ItemStyle47(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName87(_StyleName3):
    pass


class Rich87(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName87] = Field(
        None, alias='<style_name>', description=''
    )


class Label64(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich87] = Field(
        None,
        description='<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',
    )


class _StyleName88(_StyleName3):
    pass


class Rich88(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName88] = Field(
        None, alias='<style_name>', description=''
    )


class Label65(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich88] = Field(
        None,
        description='<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',
    )


class ItemStyle48(HandleStyle1):
    pass


class Emphasis24(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label65] = Field(None, description='')
    itemStyle: Optional[ItemStyle48] = Field(None, description='')


class Datum11(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Available when using <a href="#series-bar.markPoint.data.type">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class="codespan">0</code> (xAxis, radiusAxis), <code class="codespan">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-bar.markPoint.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle47] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label64] = Field(None, description='')
    emphasis: Optional[Emphasis24] = Field(None, description='')


class MarkPoint1(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-bar.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-bar.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-bar.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label61] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle44] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis23] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur13] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum11]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-bar.markPoint.data.x">x</a>, <a href="#series-bar.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-bar.markPoint.data.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-bar.markPoint.data.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-bar.markPoint.data.valueIndex">valueIndex</a> or <a href="#series-bar.markPoint.data.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName89(_StyleName3):
    pass


class Rich89(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName89] = Field(
        None, alias='<style_name>', description=''
    )


class Label66(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich89] = Field(
        None,
        description='<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',
    )


class LineStyle77(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName90(_StyleName3):
    pass


class Rich90(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName90] = Field(
        None, alias='<style_name>', description=''
    )


class Label67(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich90] = Field(
        None,
        description='<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',
    )


class LineStyle78(LineStyle51):
    pass


class Emphasis25(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label67] = Field(None, description='')
    lineStyle: Optional[LineStyle78] = Field(None, description='')


class _StyleName91(_StyleName3):
    pass


class Rich91(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName91] = Field(
        None, alias='<style_name>', description=''
    )


class Label68(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich91] = Field(
        None,
        description='<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',
    )


class LineStyle79(LineStyle51):
    pass


class Blur14(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label68] = Field(None, description='')
    lineStyle: Optional[LineStyle79] = Field(None, description='')


class LineStyle80(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName92(_StyleName3):
    pass


class Rich92(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName92] = Field(
        None, alias='<style_name>', description=''
    )


class Label69(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich92] = Field(
        None,
        description='<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',
    )


class LineStyle81(LineStyle60):
    pass


class _StyleName93(_StyleName3):
    pass


class Rich93(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName93] = Field(
        None, alias='<style_name>', description=''
    )


class Label70(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich93] = Field(
        None,
        description='<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',
    )


class Emphasis26(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle81] = Field(None, description='')
    label: Optional[Label70] = Field(None, description='')


class LineStyle82(LineStyle60):
    pass


class _StyleName94(_StyleName3):
    pass


class Rich94(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName94] = Field(
        None, alias='<style_name>', description=''
    )


class Label71(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich94] = Field(
        None,
        description='<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',
    )


class Blur15(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle82] = Field(None, description='')
    label: Optional[Label71] = Field(None, description='')


class Field02(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-bar.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-bar.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle80] = Field(
        None,
        description='<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',
    )
    label: Optional[Label69] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis26] = Field(None, description='')
    blur: Optional[Blur15] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle83(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName95(_StyleName3):
    pass


class Rich95(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName95] = Field(
        None, alias='<style_name>', description=''
    )


class Label72(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich95] = Field(
        None,
        description='<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',
    )


class LineStyle84(LineStyle60):
    pass


class _StyleName96(_StyleName3):
    pass


class Rich96(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName96] = Field(
        None, alias='<style_name>', description=''
    )


class Label73(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich96] = Field(
        None,
        description='<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',
    )


class Emphasis27(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle84] = Field(None, description='')
    label: Optional[Label73] = Field(None, description='')


class LineStyle85(LineStyle60):
    pass


class _StyleName97(_StyleName3):
    pass


class Rich97(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName97] = Field(
        None, alias='<style_name>', description=''
    )


class Label74(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich97] = Field(
        None,
        description='<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',
    )


class Blur16(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle85] = Field(None, description='')
    label: Optional[Label74] = Field(None, description='')


class Field12(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-bar.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-bar.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle83] = Field(
        None,
        description='<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',
    )
    label: Optional[Label72] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis27] = Field(None, description='')
    blur: Optional[Blur16] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data3(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-bar.markLine.data.0.x">x</a>, <a href="#series-bar.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <ol start="2">
    <li><p>Assign coordinate position with <a href="#series-bar.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>
    </li>
    <li><p>Use <a href="#series-bar.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-bar.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-bar.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>
    </li>
    <li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>
    </li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>
    <pre><code>data: [

    {
            name: &#39;average line&#39;,
            // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported
            type: &#39;average&#39;
        },
        {
            name: &#39;Horizontal line with Y value at 100&#39;,
            yAxis: 100
        },
        [
            {
                // Use the same name with starting and ending point
                name: &#39;Minimum to Maximum&#39;,
                type: &#39;min&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],
    [
            {
                name: &#39;Markline between two points&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [{
            // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
            yAxis: &#39;max&#39;,
            x: &#39;90%&#39;
        }, {
            type: &#39;max&#39;
        }],
    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field02] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field12] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine1(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-bar.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label66] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle77] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis25] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur14] = Field(
        None,
        description='<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',
    )
    data: Optional[Data3] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-bar.markLine.data.0.x">x</a>, <a href="#series-bar.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-bar.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-bar.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-bar.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-bar.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>\n<pre><code>data: [\n\n{\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n[\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName98(_StyleName3):
    pass


class Rich98(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName98] = Field(
        None, alias='<style_name>', description=''
    )


class Label75(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich98] = Field(
        None,
        description='<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',
    )


class ItemStyle49(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName99(_StyleName3):
    pass


class Rich99(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName99] = Field(
        None, alias='<style_name>', description=''
    )


class Label76(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich99] = Field(
        None,
        description='<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',
    )


class ItemStyle50(HandleStyle1):
    pass


class Emphasis28(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label76] = Field(None, description='')
    itemStyle: Optional[ItemStyle50] = Field(None, description='')


class _StyleName100(_StyleName3):
    pass


class Rich100(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName100] = Field(
        None, alias='<style_name>', description=''
    )


class Label77(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich100] = Field(
        None,
        description='<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',
    )


class ItemStyle51(HandleStyle1):
    pass


class Blur17(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label77] = Field(None, description='')
    itemStyle: Optional[ItemStyle51] = Field(None, description='')


class ItemStyle52(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName101(_StyleName3):
    pass


class Rich101(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName101] = Field(
        None, alias='<style_name>', description=''
    )


class Label78(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich101] = Field(
        None,
        description='<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',
    )


class ItemStyle53(HandleStyle1):
    pass


class _StyleName102(_StyleName3):
    pass


class Rich102(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName102] = Field(
        None, alias='<style_name>', description=''
    )


class Label79(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich102] = Field(
        None,
        description='<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',
    )


class Emphasis29(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle53] = Field(None, description='')
    label: Optional[Label79] = Field(None, description='')


class ItemStyle54(HandleStyle1):
    pass


class _StyleName103(_StyleName3):
    pass


class Rich103(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName103] = Field(
        None, alias='<style_name>', description=''
    )


class Label80(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich103] = Field(
        None,
        description='<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',
    )


class Blur18(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle54] = Field(None, description='')
    label: Optional[Label80] = Field(None, description='')


class Field03(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-bar.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-bar.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle52] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label78] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis29] = Field(None, description='')
    blur: Optional[Blur18] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle55(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName104(_StyleName3):
    pass


class Rich104(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName104] = Field(
        None, alias='<style_name>', description=''
    )


class Label81(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich104] = Field(
        None,
        description='<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',
    )


class ItemStyle56(HandleStyle1):
    pass


class _StyleName105(_StyleName3):
    pass


class Rich105(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName105] = Field(
        None, alias='<style_name>', description=''
    )


class Label82(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich105] = Field(
        None,
        description='<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',
    )


class Emphasis30(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle56] = Field(None, description='')
    label: Optional[Label82] = Field(None, description='')


class ItemStyle57(HandleStyle1):
    pass


class _StyleName106(_StyleName3):
    pass


class Rich106(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName106] = Field(
        None, alias='<style_name>', description=''
    )


class Label83(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich106] = Field(
        None,
        description='<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',
    )


class Blur19(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle57] = Field(None, description='')
    label: Optional[Label83] = Field(None, description='')


class Field13(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-bar.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-bar.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle55] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label81] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis30] = Field(None, description='')
    blur: Optional[Blur19] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data4(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-bar.markArea.data.0.x">x</a>, <a href="#series-bar.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <ol start="2">
    <li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using
    <a href="#series-bar.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>
    </li>
    <li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-bar.markArea.data.0.type">type</a>, where <a href="#series-bar.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-bar.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>
    </li>
    <li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [


        [
            {
                name: &#39;From average to max&#39;,
                type: &#39;average&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],

        [
            {
                name: &#39;Mark area between two points in data coordiantes&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [
            {
                name: &#39;From 60 to 80&#39;,
                yAxis: 60
            },
            {
                yAxis: 80
            }
        ], [
            {
                name: &#39;Mark area covers all data&#39;
                coord: [&#39;min&#39;, &#39;min&#39;]
            },
            {
                coord: [&#39;max&#39;, &#39;max&#39;]
            }
        ],
    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field03] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field13] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea1(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label75] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle49] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis28] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur17] = Field(
        None,
        description='<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',
    )
    data: Optional[Data4] = Field(
        None,
        description='<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-bar.markArea.data.0.x">x</a>, <a href="#series-bar.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>\n</ol>\n<ol start="2">\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href="#series-bar.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n<li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-bar.markArea.data.0.type">type</a>, where <a href="#series-bar.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-bar.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>\n</li>\n<li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition1(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class TextStyle20(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip8(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle20] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series2(BaseModel):
    """
        <p><strong>bar chart</strong></p>
    <p>Bar chart shows different data through the height of a bar, which is used in <a href="#grid">rectangular coordinate</a> with at least 1 category axis.</p>

    """

    type: Optional[str] = Field('bar', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    coordinateSystem: Optional[str] = Field(
        'cartesian2d',
        description='<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-bar.xAxisIndex">xAxisIndex</a> and <a href="#series-bar.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href="#series-bar.polarIndex">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    polarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#polar">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n',
    )
    roundCap: Optional[bool] = Field(
        False,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v4.5.0</code></p>\n</blockquote>\n\n\n<p>Whether to add round caps at the end of the bar sectors. Valid only for bar series on polar coordinates.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=polar-roundCap&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    realtimeSort: Optional[bool] = Field(
        False,
        description='<p>Whether to enable realtime sorting, which is used for bar-racing effect. Please refer to the tutorial <a href="http://localhost/echarts-website/handbook/en/how-to/chart-types/bar/bar-race/" target="_blank">Dynamic Sorting Bar Chart</a> in the Handbook.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=bar-race-country&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    showBackground: Optional[bool] = Field(
        False,
        description='<blockquote>\n<p>Since <code class="codespan">v4.7.0</code></p>\n</blockquote>\n\n\n<p>Whether to show background behind each bar. Use <a href="#series-bar.backgroundStyle">backgroundStyle</a> to set background style.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=bar-background&reset=1&edit=1" width="800" height="400"></iframe>\n\n',
    )
    backgroundStyle: Optional[BackgroundStyle] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.7.0</code></p>\n</blockquote>\n<p>Background style of each bar if <a href="#series-bar.showBackground">showBackground</a> is set to be <code class="codespan">true</code>.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=bar-background&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n',
    )
    label: Optional[Label53] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine5] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle36] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    labelLayout: Optional[LabelLayout1] = Field(
        None,
        description='<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',
    )
    emphasis: Optional[Emphasis21] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur11] = Field(
        None,
        description='<p>Configurations of blur state. Available when <a href="#series-bar.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select4] = Field(
        None,
        description='<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-bar.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    stack: Optional[str] = Field(
        None,
        description='<p>Name of stack. On the same category axis, the series with the same <code class="codespan">stack</code> name would be put on top of each other.</p>\n<p>See also <a href="#series-bar.stackStrategy">stackStrategy</a> on how to customize how values are stacked.</p>\n<p>Notice: <code class="codespan">stack</code> only supports stacking on <code class="codespan">value</code> and <code class="codespan">log</code> axis for now. <code class="codespan">time</code> and <code class="codespan">category</code> axis are not supported.</p>\n',
    )
    stackStrategy: Optional[str] = Field(
        'samesign',
        description='<blockquote>\n<p>Since <code class="codespan">v5.3.3</code></p>\n</blockquote>\n<p>How to stack values if the <a href="#series-bar.stack">stack</a> property has been set. Options:</p>\n<ul>\n<li><code class="codespan">&#39;samesign&#39;</code>: only stack values if the value to be stacked has the same sign as the currently cumulated stacked value.</li>\n<li><code class="codespan">&#39;all&#39;</code>: stack all values, irrespective of the signs of the current or cumulative stacked value.</li>\n<li><code class="codespan">&#39;positive&#39;</code>: only stack positive values.</li>\n<li><code class="codespan">&#39;negative&#39;</code>: only stack negative values.</li>\n</ul>\n',
    )
    sampling: Optional[str] = Field(
        None,
        description='<p>The dowmsampling strategy used when the data size is much larger than pixel size. It will improve the performance when turned on. Defaults to be turned off, indicating that all the data points will be drawn.</p>\n<p>Options:</p>\n<ul>\n<li><code class="codespan">&#39;lttb&#39;</code> Use Largest-Triangle-Three-Bucket algorithm to filter points. It will keep the trends and extremas.</li>\n<li><code class="codespan">&#39;average&#39;</code> Use average value of filter points</li>\n<li><code class="codespan">&#39;max&#39;</code> Use maximum value of filter points</li>\n<li><code class="codespan">&#39;min&#39;</code> Use minimum value of filter points</li>\n<li><code class="codespan">&#39;sum&#39;</code> Use sum of filter points</li>\n</ul>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    barWidth: Optional[Union[float, str]] = Field(
        None,
        description='<p>The width of the bar. Adaptive when not specified.</p>\n\n\n\n\n<p>Can be an absolute value like <code class="codespan">40</code> or a percent value like <code class="codespan">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;bar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;bar&#39;</code> series in the coordinate system.</p>\n',
    )
    barMaxWidth: Optional[Union[float, str]] = Field(
        None,
        description='<p>The maximum width of the bar.</p>\n<p>Has higer priority than <a href="#series-bar.barWidth">barWidth</a>.</p>\n<p>Can be an absolute value like <code class="codespan">40</code> or a percent value like <code class="codespan">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;bar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;bar&#39;</code> series in the coordinate system.</p>\n',
    )
    barMinWidth: Optional[Union[float, str]] = Field(
        None,
        description='<p>The minimum width of the bar. In cartesian the default value is <code class="codespan">1</code>, otherwise the default value if <code class="codespan">null</code>.</p>\n<p>Has higer priority than <a href="#series-bar.barWidth">barWidth</a>.</p>\n<p>Can be an absolute value like <code class="codespan">40</code> or a percent value like <code class="codespan">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;bar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;bar&#39;</code> series in the coordinate system.</p>\n',
    )
    barMinHeight: Optional[float] = Field(
        0,
        description='<p>The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.</p>\n',
    )
    barMinAngle: Optional[float] = Field(
        0,
        description='<p>The minimum angle of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small. Valid only for bar series on polar coordinates.</p>\n\n',
    )
    barGap: Optional[str] = Field(
        '30%',
        description='<p>The gap between bars between different series, is a percent value like <code class="codespan">&#39;30%&#39;</code>, which means <code class="codespan">30%</code> of the bar width.</p>\n<p>Set barGap as <code class="codespan">&#39;-100%&#39;</code> can overlap bars that belong to different series, which is useful when making a series of bar be background.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;bar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;bar&#39;</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1" width="600" height="400"></iframe>\n\n',
    )
    barCategoryGap: Optional[str] = Field(
        '20%',
        description='<p>The bar gap of a single series, defaults to be <code class="codespan">20%</code> of the category gap, can be set as a fixed value.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;bar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;bar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;bar&#39;</code> series in the coordinate system.</p>\n',
    )
    large: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class="codespan">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can&#39;t be customized any more.</p>\n',
    )
    largeThreshold: Optional[float] = Field(
        400, description='\n\n<p>The threshold enabling the drawing optimization.</p>\n'
    )
    progressive: Optional[float] = Field(
        5000,
        description='<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: Optional[float] = Field(
        3000,
        description='<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n',
    )
    progressiveChunkMode: Optional[str] = Field(
        'mod',
        description='<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class="codespan">&#39;sequential&#39;</code>: slice data by data index.</li>\n<li><code class="codespan">&#39;mod&#39;</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    seriesLayoutBy: Optional[str] = Field(
        'column',
        description='<p>When <a href="#dataset">dataset</a> is used, <code class="codespan">seriesLayoutBy</code> specifies whether the column or the row of <code class="codespan">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class="codespan">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：the rows of <code class="codespan">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href="http://localhost/echarts-website/examples/en/editor.html?c=dataset-series-layout-by" target="_blank">example</a>.</p>\n',
    )
    datasetIndex: Optional[float] = Field(
        0,
        description='<p>If <a href="#series.data">series.data</a> is not specified, and <a href="#dataset">dataset</a> exists, the series will use <code class="codespan">dataset</code>. <code class="codespan">datasetIndex</code> specifies which dataset will be used.</p>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum10]] = Field(
        None,
        description='<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class="codespan">data</code> specified in series, and there is <a href="#dataset">dataset</a> in option, series will use the first <a href="#dataset">dataset</a> as its datasource. If <code class="codespan">data</code> has been specified, <a href="#dataset">dataset</a> will not used.</p>\n<p><code class="codespan">series.datasetIndex</code> can be used to specify other <a href="#dataset">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class="lang-ts">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href="#grid">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#xAxis">xAxis</a> and <a href="#yAxis">yAxis</a> respectively.</li>\n<li>In <a href="#polar">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#radiusAxis">radiusAxis</a> and <a href="#angleAxis">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href="#visualMap">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href="#series.symbolSize">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href="#tooltip.formatter">tooltip.formatter</a> or <a href="#series.label.formatter">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class="codespan">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class="lang-ts">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href="#xAxis.type">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class="codespan">&#39;value&#39;</code> or <code class="codespan">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class="codespan">number</code> (like <code class="codespan">12</code>) (can also be a number in a <code class="codespan">string</code> format, like <code class="codespan">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class="codespan">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class="codespan">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class="lang-ts">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-punchCard" target="_blank">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class="codespan">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class="codespan">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15" target="_blank">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href="https://momentjs.com/" target="_blank">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class="codespan">&#39;2012-03&#39;</code>, <code class="codespan">&#39;2012-03-01&#39;</code>, <code class="codespan">&#39;2012-03-01 05&#39;</code>, <code class="codespan">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class="codespan">&quot;T&quot;</code> or a space: <code class="codespan">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class="codespan">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class="codespan">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class="codespan">&#39;2012&#39;</code>, <code class="codespan">&#39;2012-3-1&#39;</code>, <code class="codespan">&#39;2012/3/1&#39;</code>, <code class="codespan">&#39;2012/03/01&#39;</code>,\n<code class="codespan">&#39;2009/6/12 2:00&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href="https://dygraphs.com/date-formats.html" target="_blank">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class="codespan">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> and <code class="codespan">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class="codespan">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href="https://momentjs.com/" target="_blank">moment</a>), or use <code class="codespan">echarts.number.parseDate</code>, or check <a href="https://dygraphs.com/date-formats.html" target="_blank">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class="codespan">value</code> reprensent real value. For example:</p>\n<pre><code class="lang-ts">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class="codespan">&#39;-&#39;</code> or <code class="codespan">null</code> or <code class="codespan">undefined</code> or <code class="codespan">NaN</code> can be used to describe that a data item does not exist (ps：<em>not exist</em> does not means its value is <code class="codespan">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n',
    )
    clip: Optional[bool] = Field(
        True,
        description='\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',
    )
    markPoint: Optional[MarkPoint1] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine1] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea1] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in Bar chart .</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in Bar chart , 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition1] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip8] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class EmptyCircleStyle(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Style of circle placeholder.</p>




    """

    color: Optional[Any] = Field(
        'lightgray',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName107(_StyleName):
    pass


class Rich107(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName107] = Field(
        None, alias='<style_name>', description=''
    )


class Label84(BaseModel):
    """
    <p>Text label of pie chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(False, description='')
    position: Optional[str] = Field(
        'outside',
        description='<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class="codespan">&#39;outside&#39;</code></p>\n<p>  Outside of sectors of pie chart, which relates to corresponding sector through <a href="#series-pie.labelLine">visual guide line</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;inside&#39;</code></p>\n<p>  Inside the sectors of pie chart.</p>\n</li>\n<li><p><code class="codespan">&#39;inner&#39;</code> is the same with <code class="codespan">&#39;inside&#39;</code>.</p>\n</li>\n<li><p><code class="codespan">&#39;center&#39;</code></p>\n<p>  In the center of pie chart. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-doughnut" target="_blank">pie-doughnut example</a></p>\n</li>\n</ul>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    rotate: Optional[Union[bool, float]] = Field(
        None,
        description='<p>Label rotation.</p>\n<ul>\n<li>If <code class="codespan">true</code>, layout label radically.</li>\n<li>If <code class="codespan">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich107] = Field(
        None,
        description='<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',
    )
    alignTo: Optional[str] = Field(
        'none',
        description='\n\n<p>Label aligning policy. Valid only when <code class="codespan">position</code> is <code class="codespan">&#39;outer&#39;</code>.</p>\n<p>Since ECharts v4.6.0, we provide <code class="codespan">&#39;labelLine&#39;</code> and <code class="codespan">&#39;edge&#39;</code> two extra valid <code class="codespan">alignTo</code> values.</p>\n<ul>\n<li><code class="codespan">&#39;none&#39;</code> (default): label lines have fixed length as <a href="#series-pie.labelLine.length">labelLine.length</a> and <a href="#series-pie.labelLine.length2">labelLine.length2</a>.</li>\n<li><code class="codespan">&#39;labelLine&#39;</code>: aligning to the end of label lines and the length of the shortest horizontal label lines is configured by <a href="#series-pie.labelLine.length2">labelLine.length2</a>.</li>\n<li><code class="codespan">&#39;edge&#39;</code>: aligning to text and the distance between the edges of text and the viewport is configured by <a href="#series-pie.label.edgeDistance">label.edgeDistance</a>.</li>\n</ul>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=pie-alignTo&reset=1&edit=1" width="900" height="250"></iframe>\n\n',
    )
    edgeDistance: Optional[Union[str, float]] = Field(
        '25%',
        description='\n\n<p>The horizontal distance between text edges and viewport when <a href="#series-pie.label.position">label.position</a> is <code class="codespan">&#39;outer&#39;</code> and <a href="#series-pie.label.alignTo">label.alignTo</a> is <code class="codespan">&#39;edge&#39;</code>.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pie-label-margin&edit=1&reset=1" width="900" height="250"></iframe>\n\n\n<p>In most cases, you need a small <code class="codespan">edgeDistance</code> value like <code class="codespan">10</code> for mobile devices to make sure more text can be shown instead of being <code class="codespan">...</code>. But on larger resolutions, a percentage value should be applied so that the label lines won&#39;t be too long. If your chart is used in varied resolutions, it is advised to set <a href="tutorial.html#Responsive%20Mobile-End" target="_blank">responsive design</a> for different resolutions.</p>\n',
    )
    bleedMargin: Optional[float] = Field(
        10,
        description='\n\n<p>The horizontal distance between text and viewport when <a href="#series-pie.label.position">label.position</a> is <code class="codespan">&#39;outer&#39;</code> and <a href="#series-pie.label.alignTo">label.alignTo</a> is <code class="codespan">&#39;none&#39;</code> or <code class="codespan">&#39;labelLine&#39;</code>. Longer text will be truncated into <code class="codespan">&#39;...&#39;</code>.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pie-label-bleedMargin&edit=1&reset=1" width="800" height="250"></iframe>\n\n',
    )
    distanceToLabelLine: Optional[float] = Field(
        5,
        description='\n\n<p>Distance between label line and text.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pie-label-distanceToLabelLine&edit=1&reset=1" width="800" height="250"></iframe>\n\n',
    )


class LineStyle86(LineStyle51):
    pass


class LabelLine13(BaseModel):
    """
    <p>The style of visual guide line. Will show when <a href="#series-pie.label.position">label position</a> is set as <code class="codespan">&#39;outside&#39;</code>.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length: Optional[float] = Field(
        None, description='\n\n<p>The length of the first segment of guide line.</p>\n'
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        90,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle86] = Field(None, description='')
    maxSurfaceAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Max angle between guide line and surface normal. To prevent guide line overlapping with sector.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )


class LabelLayout2(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class Decal6(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle58(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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<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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal6] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )
    borderRadius: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.</p>\n<p>Since <code class="codespan">v5.3.0</code>, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.</p>\n<p>For example:</p>\n<p>Before <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the inner radius and the outer corner radius is <code class="codespan">50%</code> of the outer radius.</li>\n</ul>\n<p>Since <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the difference between the inner sector and the outer sector, and the outer corner radius is <code class="codespan">50%</code> of the difference.</li>\n<li><code class="codespan">borderRadius: [5, 10, 15, 20]</code>: means the two inner corner radii are <code class="codespan">5px</code> and <code class="codespan">10px</code>, and the two outer corner radii are <code class="codespan">15px</code> and <code class="codespan">20px</code>.</li>\n</ul>\n',
    )


class _StyleName108(_StyleName):
    pass


class Rich108(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName108] = Field(
        None, alias='<style_name>', description=''
    )


class Label85(BaseModel):
    show: Optional[bool] = Field(False, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    rotate: Optional[Union[bool, float]] = Field(
        None,
        description='<p>Label rotation.</p>\n<ul>\n<li>If <code class="codespan">true</code>, layout label radically.</li>\n<li>If <code class="codespan">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich108] = Field(
        None,
        description='<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',
    )


class LineStyle87(LineStyle51):
    pass


class LabelLine14(BaseModel):
    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle87] = Field(None, description='')


class ItemStyle59(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Since 5.2.0, it can be 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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    borderRadius: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.</p>\n<p>Since <code class="codespan">v5.3.0</code>, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.</p>\n<p>For example:</p>\n<p>Before <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the inner radius and the outer corner radius is <code class="codespan">50%</code> of the outer radius.</li>\n</ul>\n<p>Since <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the difference between the inner sector and the outer sector, and the outer corner radius is <code class="codespan">50%</code> of the difference.</li>\n<li><code class="codespan">borderRadius: [5, 10, 15, 20]</code>: means the two inner corner radii are <code class="codespan">5px</code> and <code class="codespan">10px</code>, and the two outer corner radii are <code class="codespan">15px</code> and <code class="codespan">20px</code>.</li>\n</ul>\n',
    )


class Emphasis31(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    scale: Optional[bool] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n\n\n<p>Whether to scale to highlight the data in emphasis state.</p>\n',
    )
    scaleSize: Optional[float] = Field(
        10,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n\n\n<p>Size of scale. Available when <a href="#series-pie.emphasis.scale">emphasis.scale</a> is set as <code class="codespan">true</code>.</p>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label85] = Field(None, description='')
    labelLine: Optional[LabelLine14] = Field(None, description='')
    itemStyle: Optional[ItemStyle59] = Field(None, description='')


class _StyleName109(_StyleName):
    pass


class Rich109(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName109] = Field(
        None, alias='<style_name>', description=''
    )


class Label86(BaseModel):
    show: Optional[bool] = Field(False, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    rotate: Optional[Union[bool, float]] = Field(
        None,
        description='<p>Label rotation.</p>\n<ul>\n<li>If <code class="codespan">true</code>, layout label radically.</li>\n<li>If <code class="codespan">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich109] = Field(
        None,
        description='<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',
    )


class LineStyle88(LineStyle51):
    pass


class LabelLine15(BaseModel):
    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle88] = Field(None, description='')


class ItemStyle60(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    borderRadius: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.</p>\n<p>Since <code class="codespan">v5.3.0</code>, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.</p>\n<p>For example:</p>\n<p>Before <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the inner radius and the outer corner radius is <code class="codespan">50%</code> of the outer radius.</li>\n</ul>\n<p>Since <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the difference between the inner sector and the outer sector, and the outer corner radius is <code class="codespan">50%</code> of the difference.</li>\n<li><code class="codespan">borderRadius: [5, 10, 15, 20]</code>: means the two inner corner radii are <code class="codespan">5px</code> and <code class="codespan">10px</code>, and the two outer corner radii are <code class="codespan">15px</code> and <code class="codespan">20px</code>.</li>\n</ul>\n',
    )


class Blur20(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-pie.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    label: Optional[Label86] = Field(None, description='')
    labelLine: Optional[LabelLine15] = Field(None, description='')
    itemStyle: Optional[ItemStyle60] = Field(None, description='')


class _StyleName110(_StyleName):
    pass


class Rich110(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName110] = Field(
        None, alias='<style_name>', description=''
    )


class Label87(BaseModel):
    show: Optional[bool] = Field(False, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    rotate: Optional[Union[bool, float]] = Field(
        None,
        description='<p>Label rotation.</p>\n<ul>\n<li>If <code class="codespan">true</code>, layout label radically.</li>\n<li>If <code class="codespan">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich110] = Field(
        None,
        description='<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',
    )


class LineStyle89(LineStyle51):
    pass


class LabelLine16(BaseModel):
    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle89] = Field(None, description='')


class ItemStyle61(ItemStyle60):
    pass


class Select6(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-pie.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label87] = Field(None, description='')
    labelLine: Optional[LabelLine16] = Field(None, description='')
    itemStyle: Optional[ItemStyle61] = Field(None, description='')


class _StyleName111(_StyleName):
    pass


class Rich111(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName111] = Field(
        None, alias='<style_name>', description=''
    )


class Label88(BaseModel):
    """
    <p>The label configuration of a single sector.</p>

    """

    show: Optional[bool] = Field(False, description='')
    position: Optional[str] = Field(
        'outside',
        description='<p>The position of label.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class="codespan">&#39;outside&#39;</code></p>\n<p>  Outside of sectors of pie chart, which relates to corresponding sector through <a href="#series-pie.labelLine">visual guide line</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;inside&#39;</code></p>\n<p>  Inside the sectors of pie chart.</p>\n</li>\n<li><p><code class="codespan">&#39;inner&#39;</code> is the same with <code class="codespan">&#39;inside&#39;</code>.</p>\n</li>\n<li><p><code class="codespan">&#39;center&#39;</code></p>\n<p>  In the center of pie chart. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-doughnut" target="_blank">pie-doughnut example</a></p>\n</li>\n</ul>\n',
    )
    rotate: Optional[Union[bool, float]] = Field(
        None,
        description='<p>Label rotation.</p>\n<ul>\n<li>If <code class="codespan">true</code>, layout label radically.</li>\n<li>If <code class="codespan">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich111] = Field(
        None,
        description='<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',
    )


class LineStyle90(LineStyle51):
    pass


class LabelLine17(BaseModel):
    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    length: Optional[float] = Field(
        None, description='\n\n<p>The length of the first segment of guide line.</p>\n'
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    lineStyle: Optional[LineStyle90] = Field(None, description='')


class Decal7(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle62(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal7] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )
    borderRadius: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>To specify the roundness for corners of the sectors of the pie chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.</p>\n<p>Since <code class="codespan">v5.3.0</code>, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.</p>\n<p>For example:</p>\n<p>Before <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the inner radius and the outer corner radius is <code class="codespan">50%</code> of the outer radius.</li>\n</ul>\n<p>Since <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the difference between the inner sector and the outer sector, and the outer corner radius is <code class="codespan">50%</code> of the difference.</li>\n<li><code class="codespan">borderRadius: [5, 10, 15, 20]</code>: means the two inner corner radii are <code class="codespan">5px</code> and <code class="codespan">10px</code>, and the two outer corner radii are <code class="codespan">15px</code> and <code class="codespan">20px</code>.</li>\n</ul>\n',
    )


class _StyleName112(_StyleName):
    pass


class Rich112(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName112] = Field(
        None, alias='<style_name>', description=''
    )


class Label89(BaseModel):
    show: Optional[bool] = Field(False, description='')
    rotate: Optional[Union[bool, float]] = Field(
        None,
        description='<p>Label rotation.</p>\n<ul>\n<li>If <code class="codespan">true</code>, layout label radically.</li>\n<li>If <code class="codespan">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich112] = Field(
        None,
        description='<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',
    )


class LineStyle91(LineStyle51):
    pass


class LabelLine18(BaseModel):
    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle91] = Field(None, description='')


class ItemStyle63(ItemStyle59):
    pass


class Emphasis32(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label89] = Field(None, description='')
    labelLine: Optional[LabelLine18] = Field(None, description='')
    itemStyle: Optional[ItemStyle63] = Field(None, description='')


class _StyleName113(_StyleName):
    pass


class Rich113(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName113] = Field(
        None, alias='<style_name>', description=''
    )


class Label90(BaseModel):
    show: Optional[bool] = Field(False, description='')
    rotate: Optional[Union[bool, float]] = Field(
        None,
        description='<p>Label rotation.</p>\n<ul>\n<li>If <code class="codespan">true</code>, layout label radically.</li>\n<li>If <code class="codespan">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich113] = Field(
        None,
        description='<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',
    )


class LineStyle92(LineStyle51):
    pass


class LabelLine19(BaseModel):
    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle92] = Field(None, description='')


class ItemStyle64(ItemStyle60):
    pass


class Blur21(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    label: Optional[Label90] = Field(None, description='')
    labelLine: Optional[LabelLine19] = Field(None, description='')
    itemStyle: Optional[ItemStyle64] = Field(None, description='')


class _StyleName114(_StyleName):
    pass


class Rich114(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName114] = Field(
        None, alias='<style_name>', description=''
    )


class Label91(BaseModel):
    show: Optional[bool] = Field(False, description='')
    rotate: Optional[Union[bool, float]] = Field(
        None,
        description='<p>Label rotation.</p>\n<ul>\n<li>If <code class="codespan">true</code>, layout label radically.</li>\n<li>If <code class="codespan">number</code>, means degree that labels are rotated. From -90 degree to 90 degree. The negative value represents clockwise.</li>\n</ul>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich114] = Field(
        None,
        description='<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',
    )


class LineStyle93(LineStyle51):
    pass


class LabelLine20(BaseModel):
    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle93] = Field(None, description='')


class ItemStyle65(ItemStyle60):
    pass


class Select7(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label91] = Field(None, description='')
    labelLine: Optional[LabelLine20] = Field(None, description='')
    itemStyle: Optional[ItemStyle65] = Field(None, description='')


class TextStyle21(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip9(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle21] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum12(BaseModel):
    name: Optional[str] = Field(None, description='<p>The name of data item.</p>\n')
    value: Optional[float] = Field(None, description='<p>Data value.</p>\n')
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    selected: Optional[bool] = Field(
        False, description='<p>Whether the data item is selected.</p>\n'
    )
    label: Optional[Label88] = Field(
        None, description='<p>The label configuration of a single sector.</p>\n'
    )
    labelLine: Optional[LabelLine17] = Field(None, description='')
    itemStyle: Optional[ItemStyle62] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    emphasis: Optional[Emphasis32] = Field(None, description='')
    blur: Optional[Blur21] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )
    select: Optional[Select7] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )
    tooltip: Optional[Tooltip9] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class _StyleName115(_StyleName3):
    pass


class Rich115(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName115] = Field(
        None, alias='<style_name>', description=''
    )


class Label92(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich115] = Field(
        None,
        description='<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',
    )


class ItemStyle66(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName116(_StyleName3):
    pass


class Rich116(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName116] = Field(
        None, alias='<style_name>', description=''
    )


class Label93(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich116] = Field(
        None,
        description='<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',
    )


class ItemStyle67(HandleStyle1):
    pass


class Emphasis33(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label93] = Field(None, description='')
    itemStyle: Optional[ItemStyle67] = Field(None, description='')


class _StyleName117(_StyleName3):
    pass


class Rich117(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName117] = Field(
        None, alias='<style_name>', description=''
    )


class Label94(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich117] = Field(
        None,
        description='<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',
    )


class ItemStyle68(HandleStyle1):
    pass


class Blur22(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label94] = Field(None, description='')
    itemStyle: Optional[ItemStyle68] = Field(None, description='')


class ItemStyle69(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName118(_StyleName3):
    pass


class Rich118(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName118] = Field(
        None, alias='<style_name>', description=''
    )


class Label95(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich118] = Field(
        None,
        description='<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',
    )


class _StyleName119(_StyleName3):
    pass


class Rich119(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName119] = Field(
        None, alias='<style_name>', description=''
    )


class Label96(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich119] = Field(
        None,
        description='<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',
    )


class ItemStyle70(HandleStyle1):
    pass


class Emphasis34(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label96] = Field(None, description='')
    itemStyle: Optional[ItemStyle70] = Field(None, description='')


class Datum13(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle69] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label95] = Field(None, description='')
    emphasis: Optional[Emphasis34] = Field(None, description='')


class MarkPoint2(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-pie.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-pie.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-pie.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label92] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle66] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis33] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur22] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum13]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-pie.markPoint.data.x">x</a>, <a href="#series-pie.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName120(_StyleName3):
    pass


class Rich120(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName120] = Field(
        None, alias='<style_name>', description=''
    )


class Label97(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich120] = Field(
        None,
        description='<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',
    )


class LineStyle94(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName121(_StyleName3):
    pass


class Rich121(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName121] = Field(
        None, alias='<style_name>', description=''
    )


class Label98(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich121] = Field(
        None,
        description='<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',
    )


class LineStyle95(LineStyle51):
    pass


class Emphasis35(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label98] = Field(None, description='')
    lineStyle: Optional[LineStyle95] = Field(None, description='')


class _StyleName122(_StyleName3):
    pass


class Rich122(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName122] = Field(
        None, alias='<style_name>', description=''
    )


class Label99(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich122] = Field(
        None,
        description='<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',
    )


class LineStyle96(LineStyle51):
    pass


class Blur23(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label99] = Field(None, description='')
    lineStyle: Optional[LineStyle96] = Field(None, description='')


class LineStyle97(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName123(_StyleName3):
    pass


class Rich123(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName123] = Field(
        None, alias='<style_name>', description=''
    )


class Label100(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich123] = Field(
        None,
        description='<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',
    )


class LineStyle98(LineStyle60):
    pass


class _StyleName124(_StyleName3):
    pass


class Rich124(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName124] = Field(
        None, alias='<style_name>', description=''
    )


class Label101(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich124] = Field(
        None,
        description='<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',
    )


class Emphasis36(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle98] = Field(None, description='')
    label: Optional[Label101] = Field(None, description='')


class LineStyle99(LineStyle60):
    pass


class _StyleName125(_StyleName3):
    pass


class Rich125(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName125] = Field(
        None, alias='<style_name>', description=''
    )


class Label102(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich125] = Field(
        None,
        description='<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',
    )


class Blur24(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle99] = Field(None, description='')
    label: Optional[Label102] = Field(None, description='')


class Field04(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle97] = Field(
        None,
        description='<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',
    )
    label: Optional[Label100] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis36] = Field(None, description='')
    blur: Optional[Blur24] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle100(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName126(_StyleName3):
    pass


class Rich126(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName126] = Field(
        None, alias='<style_name>', description=''
    )


class Label103(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich126] = Field(
        None,
        description='<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',
    )


class LineStyle101(LineStyle60):
    pass


class _StyleName127(_StyleName3):
    pass


class Rich127(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName127] = Field(
        None, alias='<style_name>', description=''
    )


class Label104(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich127] = Field(
        None,
        description='<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',
    )


class Emphasis37(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle101] = Field(None, description='')
    label: Optional[Label104] = Field(None, description='')


class LineStyle102(LineStyle60):
    pass


class _StyleName128(_StyleName3):
    pass


class Rich128(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName128] = Field(
        None, alias='<style_name>', description=''
    )


class Label105(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich128] = Field(
        None,
        description='<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',
    )


class Blur25(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle102] = Field(None, description='')
    label: Optional[Label105] = Field(None, description='')


class Field14(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle100] = Field(
        None,
        description='<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',
    )
    label: Optional[Label103] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis37] = Field(None, description='')
    blur: Optional[Blur25] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data5(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-pie.markLine.data.0.x">x</a>, <a href="#series-pie.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field04] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field14] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine2(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-pie.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label97] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle94] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis35] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur23] = Field(
        None,
        description='<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',
    )
    data: Optional[Data5] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-pie.markLine.data.0.x">x</a>, <a href="#series-pie.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n\n[\n        {\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName129(_StyleName3):
    pass


class Rich129(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName129] = Field(
        None, alias='<style_name>', description=''
    )


class Label106(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich129] = Field(
        None,
        description='<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',
    )


class ItemStyle71(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName130(_StyleName3):
    pass


class Rich130(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName130] = Field(
        None, alias='<style_name>', description=''
    )


class Label107(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich130] = Field(
        None,
        description='<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',
    )


class ItemStyle72(HandleStyle1):
    pass


class Emphasis38(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label107] = Field(None, description='')
    itemStyle: Optional[ItemStyle72] = Field(None, description='')


class _StyleName131(_StyleName3):
    pass


class Rich131(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName131] = Field(
        None, alias='<style_name>', description=''
    )


class Label108(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich131] = Field(
        None,
        description='<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',
    )


class ItemStyle73(HandleStyle1):
    pass


class Blur26(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label108] = Field(None, description='')
    itemStyle: Optional[ItemStyle73] = Field(None, description='')


class ItemStyle74(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName132(_StyleName3):
    pass


class Rich132(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName132] = Field(
        None, alias='<style_name>', description=''
    )


class Label109(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich132] = Field(
        None,
        description='<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',
    )


class ItemStyle75(HandleStyle1):
    pass


class _StyleName133(_StyleName3):
    pass


class Rich133(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName133] = Field(
        None, alias='<style_name>', description=''
    )


class Label110(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich133] = Field(
        None,
        description='<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',
    )


class Emphasis39(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle75] = Field(None, description='')
    label: Optional[Label110] = Field(None, description='')


class ItemStyle76(HandleStyle1):
    pass


class _StyleName134(_StyleName3):
    pass


class Rich134(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName134] = Field(
        None, alias='<style_name>', description=''
    )


class Label111(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich134] = Field(
        None,
        description='<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',
    )


class Blur27(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle76] = Field(None, description='')
    label: Optional[Label111] = Field(None, description='')


class Field05(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle74] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label109] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis39] = Field(None, description='')
    blur: Optional[Blur27] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle77(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName135(_StyleName3):
    pass


class Rich135(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName135] = Field(
        None, alias='<style_name>', description=''
    )


class Label112(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich135] = Field(
        None,
        description='<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',
    )


class ItemStyle78(HandleStyle1):
    pass


class _StyleName136(_StyleName3):
    pass


class Rich136(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName136] = Field(
        None, alias='<style_name>', description=''
    )


class Label113(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich136] = Field(
        None,
        description='<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',
    )


class Emphasis40(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle78] = Field(None, description='')
    label: Optional[Label113] = Field(None, description='')


class ItemStyle79(HandleStyle1):
    pass


class _StyleName137(_StyleName3):
    pass


class Rich137(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName137] = Field(
        None, alias='<style_name>', description=''
    )


class Label114(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich137] = Field(
        None,
        description='<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',
    )


class Blur28(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle79] = Field(None, description='')
    label: Optional[Label114] = Field(None, description='')


class Field15(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle77] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label112] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis40] = Field(None, description='')
    blur: Optional[Blur28] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data6(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-pie.markArea.data.0.x">x</a>, <a href="#series-pie.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field05] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field15] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea2(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label106] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle71] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis38] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur26] = Field(
        None,
        description='<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',
    )
    data: Optional[Data6] = Field(
        None,
        description='<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-pie.markArea.data.0.x">x</a>, <a href="#series-pie.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code 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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition2(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class TextStyle22(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip10(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle22] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series3(BaseModel):
    """
        <p>The pie chart is mainly used for showing proportion of different categories. Each arc length represents the proportion of data quantity.</p>
    <p><strong>Tip:</strong> The pie chart is more suitable for illustrating the numerical proportion. If you just to present the numerical differences of various categories, the <a href="bar" target="_blank">bar graph</a> chart is more suggested. Because compared to tiny length difference,  people is less sensitive to the minor radian difference. Otherwise, it can also be shown as Nightingale chart by using the <a href="#series-pie.roseType">roseType</a> to distinguish different data through radius.</p>
    <p>For multiple pie series in a single chart, you may use <a href="#series-pie.left">left</a>, <a href="#series-pie.right">right</a>, <a href="#series-pie.top">top</a>, <a href="#series-pie.bottom">bottom</a>, <a href="#series-pie.width">width</a>, and <a href="#series-pie.height">height</a> to locate the pies. Percetage values like <a href="#series-pie.radius">radius</a> or <a href="#series-pie.label.edgeDistance">label.edgeDistance</a> are relative to the viewport defined by this setting.</p>
    <p><strong> The below example shows a customized Nightingale chart: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=pie-custom&edit=1&reset=1" width="500" height="400"></iframe>


    <p>Since ECharts v4.6.0, we provide <code class="codespan">&#39;labelLine&#39;</code> and <code class="codespan">&#39;edge&#39;</code> two extra layouts. Check <a href="#series-pie.label.alignTo">label.alignTo</a> for more information.</p>

    """

    type: Optional[str] = Field('pie', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'data',
        description='\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',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='\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',
    )
    selectedOffset: Optional[float] = Field(
        10, description='\n\n<p>The offset distance of selected sector.</p>\n'
    )
    clockwise: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether the layout of sectors of pie chart is clockwise.</p>\n',
    )
    startAngle: Optional[float] = Field(
        90, description='\n\n<p>The start angle, which range is [0, 360].</p>\n'
    )
    minAngle: Optional[float] = Field(
        0,
        description='\n\n<p>The minimum angle of sector (0 ~ 360). It prevents some sector from being too small when value is small, which will affect user interaction.</p>\n',
    )
    minShowLabelAngle: Optional[float] = Field(
        0,
        description='\n\n<p>If a sector is less than this angle (0 ~ 360), label and labelLine will not be displayed.</p>\n',
    )
    roseType: Optional[Union[bool, str]] = Field(
        False,
        description='\n\n<p>Whether to show as Nightingale chart, which distinguishs data through radius. There are 2 optional modes:</p>\n<ul>\n<li><code class="codespan">&#39;radius&#39;</code> Use central angle to show the percentage of data, radius to show data size.</li>\n<li><code class="codespan">&#39;area&#39;</code> All the sectors will share the same central angle, the data size is shown only through radiuses.</li>\n</ul>\n',
    )
    avoidLabelOverlap: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable the strategy to avoid labels overlap. Defaults to be enabled, which will move the label positions in the case of labels overlapping</p>\n',
    )
    stillShowZeroSum: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show sector when all data are zero.</p>\n'
    )
    percentPrecision: Optional[float] = Field(
        2,
        description='\n\n<p>The precision of the percentage value. The default value is <code class="codespan">2</code>.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        0,
        description='<p>Distance between pie chart component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        0,
        description='<p>Distance between pie chart component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        0,
        description='<p>Distance between pie chart component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        0,
        description='<p>Distance between pie chart component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Width of pie chart component. Adaptive by default.</p>\n',
    )
    height: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Height of pie chart component. Adaptive by default.</p>\n',
    )
    showEmptyCircle: Optional[bool] = Field(
        True,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>If display an placeholder circle when there is no data.</p>\n',
    )
    emptyCircleStyle: Optional[EmptyCircleStyle] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>Style of circle placeholder.</p>\n\n\n\n',
    )
    label: Optional[Label84] = Field(
        None,
        description='<p>Text label of pie chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine13] = Field(
        None,
        description='<p>The style of visual guide line. Will show when <a href="#series-pie.label.position">label position</a> is set as <code class="codespan">&#39;outside&#39;</code>.</p>\n',
    )
    labelLayout: Optional[LabelLayout2] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle58] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    emphasis: Optional[Emphasis31] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur20] = Field(
        None,
        description='<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-pie.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select6] = Field(
        None,
        description='<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-pie.selectedMode">selectedMode</a> is set.</p>\n',
    )
    center: Optional[Any] = Field(
        "['50%', '50%']",
        description='\n\n<p>Center position of Pie chart, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>',
    )
    radius: Optional[Union[float, str, Any]] = Field(
        "[0, '75%']",
        description='\n\n<p>Radius of Pie chart. Value can be:</p>\n<ul>\n<li><code class="codespan">number</code>: Specify outside radius directly.</li>\n<li><code class="codespan">string</code>: For example, <code class="codespan">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</li>\n</ul>\n<ul>\n<li><code class="codespan">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</li>\n</ul>\n<p>Donut chart can be achieved by setting a inner radius.</p>\n',
    )
    seriesLayoutBy: Optional[str] = Field(
        'column',
        description='<p>When <a href="#dataset">dataset</a> is used, <code class="codespan">seriesLayoutBy</code> specifies whether the column or the row of <code class="codespan">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class="codespan">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：the rows of <code class="codespan">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href="http://localhost/echarts-website/examples/en/editor.html?c=dataset-series-layout-by" target="_blank">example</a>.</p>\n',
    )
    datasetIndex: Optional[float] = Field(
        0,
        description='<p>If <a href="#series.data">series.data</a> is not specified, and <a href="#dataset">dataset</a> exists, the series will use <code class="codespan">dataset</code>. <code class="codespan">datasetIndex</code> specifies which dataset will be used.</p>\n',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum12]] = Field(
        None,
        description='<p>Data array of  series, which can be a single data value, like:</p>\n<pre><code class="lang-ts">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href="#visualMap">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class="lang-ts">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href="#visualMap">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class="lang-ts">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class="lang-ts">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n',
    )
    markPoint: Optional[MarkPoint2] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine2] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea2] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animationType: Optional[str] = Field(
        'expansion',
        description='\n\n<p>Initial animation type.</p>\n<ul>\n<li><code class="codespan">&#39;expansion&#39;</code> Default expansion animation.</li>\n<li><code class="codespan">&#39;scale&#39;</code> Scale animation. You can use it with <code class="codespan">animationEasing=&#39;elasticOut&#39;</code> to have popup effect.</li>\n</ul>\n',
    )
    animationTypeUpdate: Optional[str] = Field(
        'transition',
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v4.4.0</code></p>\n</blockquote>\n<p>Animation type when data updates.</p>\n<ul>\n<li><code class="codespan">&#39;transition&#39;</code> Changing start and end angle of each sector from the old value to new value.</li>\n<li><code class="codespan">&#39;expansion&#39;</code> The whole pie expands again.</li>\n</ul>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition2] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip10] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName138(_StyleName3):
    pass


class Rich138(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName138] = Field(
        None, alias='<style_name>', description=''
    )


class Label115(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich138] = Field(
        None,
        description='<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',
    )


class LineStyle103(LineStyle51):
    pass


class LabelLine21(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle103] = Field(None, description='')


class LabelLayout3(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class ItemStyle80(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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<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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.8,
        description='\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',
    )


class _StyleName139(_StyleName3):
    pass


class Rich139(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName139] = Field(
        None, alias='<style_name>', description=''
    )


class Label116(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich139] = Field(
        None,
        description='<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',
    )


class LineStyle104(LineStyle51):
    pass


class LabelLine22(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle104] = Field(None, description='')


class ItemStyle81(ItemStyle15):
    pass


class Emphasis41(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    scale: Optional[Union[bool, float]] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n\n\n<p>Whether to scale to highlight the data in emphasis state. <code class="codespan">number</code> has been supported since <code class="codespan">v5.3.2</code>, the default scale value is 1.1.</p>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label116] = Field(None, description='')
    labelLine: Optional[LabelLine22] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle81] = Field(None, description='')


class _StyleName140(_StyleName3):
    pass


class Rich140(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName140] = Field(
        None, alias='<style_name>', description=''
    )


class Label117(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich140] = Field(
        None,
        description='<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',
    )


class LineStyle105(LineStyle51):
    pass


class LabelLine23(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle105] = Field(None, description='')


class ItemStyle82(HandleStyle1):
    pass


class Blur29(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-scatter.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    label: Optional[Label117] = Field(None, description='')
    labelLine: Optional[LabelLine23] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle82] = Field(None, description='')


class _StyleName141(_StyleName3):
    pass


class Rich141(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName141] = Field(
        None, alias='<style_name>', description=''
    )


class Label118(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich141] = Field(
        None,
        description='<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',
    )


class LineStyle106(LineStyle51):
    pass


class LabelLine24(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle106] = Field(None, description='')


class ItemStyle83(HandleStyle1):
    pass


class Select8(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-scatter.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label118] = Field(None, description='')
    labelLine: Optional[LabelLine24] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle83] = Field(None, description='')


class _StyleName142(_StyleName3):
    pass


class Rich142(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName142] = Field(
        None, alias='<style_name>', description=''
    )


class Label119(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich142] = Field(
        None,
        description='<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',
    )


class LineStyle107(LineStyle51):
    pass


class LabelLine25(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle107] = Field(None, description='')


class ItemStyle84(HandleStyle1):
    """
    <p>the style setting about single data point(bubble).</p>

    """

    pass


class _StyleName143(_StyleName3):
    pass


class Rich143(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName143] = Field(
        None, alias='<style_name>', description=''
    )


class Label120(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich143] = Field(
        None,
        description='<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',
    )


class LineStyle108(LineStyle51):
    pass


class LabelLine26(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle108] = Field(None, description='')


class ItemStyle85(ItemStyle15):
    pass


class Emphasis42(BaseModel):
    """
    <p>Emphasis state of single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label120] = Field(None, description='')
    labelLine: Optional[LabelLine26] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle85] = Field(None, description='')


class _StyleName144(_StyleName3):
    pass


class Rich144(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName144] = Field(
        None, alias='<style_name>', description=''
    )


class Label121(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich144] = Field(
        None,
        description='<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',
    )


class LineStyle109(LineStyle51):
    pass


class LabelLine27(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle109] = Field(None, description='')


class ItemStyle86(HandleStyle1):
    pass


class Blur30(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of single data.</p>

    """

    label: Optional[Label121] = Field(None, description='')
    labelLine: Optional[LabelLine27] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle86] = Field(None, description='')


class _StyleName145(_StyleName3):
    pass


class Rich145(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName145] = Field(
        None, alias='<style_name>', description=''
    )


class Label122(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich145] = Field(
        None,
        description='<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',
    )


class LineStyle110(LineStyle51):
    pass


class LabelLine28(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle110] = Field(None, description='')


class ItemStyle87(HandleStyle1):
    pass


class Select9(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label122] = Field(None, description='')
    labelLine: Optional[LabelLine28] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle87] = Field(None, description='')


class TextStyle23(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip11(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle23] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum14(BaseModel):
    name: Optional[str] = Field(None, description='<p>the name of data item.</p>\n')
    value: Optional[Any] = Field(None, description='<p>the value of data item.</p>\n')
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    symbol: Optional[str] = Field(
        None,
        description='\n\n<p>Symbol of single data.</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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\n\n<p>single data 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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate degree of single data 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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code 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',
    )
    label: Optional[Label119] = Field(None, description='')
    labelLine: Optional[LabelLine25] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle84] = Field(
        None, description='<p>the style setting about single data point(bubble).</p>\n'
    )
    emphasis: Optional[Emphasis42] = Field(
        None, description='<p>Emphasis state of single data.</p>\n'
    )
    blur: Optional[Blur30] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of single data.</p>\n',
    )
    select: Optional[Select9] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of single data.</p>\n',
    )
    tooltip: Optional[Tooltip11] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class _StyleName146(_StyleName3):
    pass


class Rich146(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName146] = Field(
        None, alias='<style_name>', description=''
    )


class Label123(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich146] = Field(
        None,
        description='<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',
    )


class ItemStyle88(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName147(_StyleName3):
    pass


class Rich147(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName147] = Field(
        None, alias='<style_name>', description=''
    )


class Label124(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich147] = Field(
        None,
        description='<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',
    )


class ItemStyle89(HandleStyle1):
    pass


class Emphasis43(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label124] = Field(None, description='')
    itemStyle: Optional[ItemStyle89] = Field(None, description='')


class _StyleName148(_StyleName3):
    pass


class Rich148(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName148] = Field(
        None, alias='<style_name>', description=''
    )


class Label125(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich148] = Field(
        None,
        description='<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',
    )


class ItemStyle90(HandleStyle1):
    pass


class Blur31(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label125] = Field(None, description='')
    itemStyle: Optional[ItemStyle90] = Field(None, description='')


class ItemStyle91(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName149(_StyleName3):
    pass


class Rich149(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName149] = Field(
        None, alias='<style_name>', description=''
    )


class Label126(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich149] = Field(
        None,
        description='<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',
    )


class _StyleName150(_StyleName3):
    pass


class Rich150(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName150] = Field(
        None, alias='<style_name>', description=''
    )


class Label127(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich150] = Field(
        None,
        description='<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',
    )


class ItemStyle92(HandleStyle1):
    pass


class Emphasis44(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label127] = Field(None, description='')
    itemStyle: Optional[ItemStyle92] = Field(None, description='')


class Datum15(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Available when using <a href="#series-scatter.markPoint.data.type">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class="codespan">0</code> (xAxis, radiusAxis), <code class="codespan">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-scatter.markPoint.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle91] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label126] = Field(None, description='')
    emphasis: Optional[Emphasis44] = Field(None, description='')


class MarkPoint3(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-scatter.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-scatter.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-scatter.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label123] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle88] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis43] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur31] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum15]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-scatter.markPoint.data.x">x</a>, <a href="#series-scatter.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-scatter.markPoint.data.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-scatter.markPoint.data.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-scatter.markPoint.data.valueIndex">valueIndex</a> or <a href="#series-scatter.markPoint.data.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName151(_StyleName3):
    pass


class Rich151(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName151] = Field(
        None, alias='<style_name>', description=''
    )


class Label128(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich151] = Field(
        None,
        description='<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',
    )


class LineStyle111(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName152(_StyleName3):
    pass


class Rich152(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName152] = Field(
        None, alias='<style_name>', description=''
    )


class Label129(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich152] = Field(
        None,
        description='<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',
    )


class LineStyle112(LineStyle51):
    pass


class Emphasis45(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label129] = Field(None, description='')
    lineStyle: Optional[LineStyle112] = Field(None, description='')


class _StyleName153(_StyleName3):
    pass


class Rich153(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName153] = Field(
        None, alias='<style_name>', description=''
    )


class Label130(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich153] = Field(
        None,
        description='<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',
    )


class LineStyle113(LineStyle51):
    pass


class Blur32(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label130] = Field(None, description='')
    lineStyle: Optional[LineStyle113] = Field(None, description='')


class LineStyle114(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName154(_StyleName3):
    pass


class Rich154(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName154] = Field(
        None, alias='<style_name>', description=''
    )


class Label131(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich154] = Field(
        None,
        description='<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',
    )


class LineStyle115(LineStyle60):
    pass


class _StyleName155(_StyleName3):
    pass


class Rich155(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName155] = Field(
        None, alias='<style_name>', description=''
    )


class Label132(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich155] = Field(
        None,
        description='<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',
    )


class Emphasis46(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle115] = Field(None, description='')
    label: Optional[Label132] = Field(None, description='')


class LineStyle116(LineStyle60):
    pass


class _StyleName156(_StyleName3):
    pass


class Rich156(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName156] = Field(
        None, alias='<style_name>', description=''
    )


class Label133(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich156] = Field(
        None,
        description='<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',
    )


class Blur33(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle116] = Field(None, description='')
    label: Optional[Label133] = Field(None, description='')


class Field06(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-scatter.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-scatter.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle114] = Field(
        None,
        description='<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',
    )
    label: Optional[Label131] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis46] = Field(None, description='')
    blur: Optional[Blur33] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle117(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName157(_StyleName3):
    pass


class Rich157(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName157] = Field(
        None, alias='<style_name>', description=''
    )


class Label134(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich157] = Field(
        None,
        description='<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',
    )


class LineStyle118(LineStyle60):
    pass


class _StyleName158(_StyleName3):
    pass


class Rich158(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName158] = Field(
        None, alias='<style_name>', description=''
    )


class Label135(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich158] = Field(
        None,
        description='<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',
    )


class Emphasis47(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle118] = Field(None, description='')
    label: Optional[Label135] = Field(None, description='')


class LineStyle119(LineStyle60):
    pass


class _StyleName159(_StyleName3):
    pass


class Rich159(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName159] = Field(
        None, alias='<style_name>', description=''
    )


class Label136(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich159] = Field(
        None,
        description='<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',
    )


class Blur34(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle119] = Field(None, description='')
    label: Optional[Label136] = Field(None, description='')


class Field16(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-scatter.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-scatter.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle117] = Field(
        None,
        description='<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',
    )
    label: Optional[Label134] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis47] = Field(None, description='')
    blur: Optional[Blur34] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data7(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-scatter.markLine.data.0.x">x</a>, <a href="#series-scatter.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <ol start="2">
    <li><p>Assign coordinate position with <a href="#series-scatter.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>
    </li>
    <li><p>Use <a href="#series-scatter.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-scatter.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-scatter.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>
    </li>
    <li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>
    </li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>
    <pre><code>data: [

    {
            name: &#39;average line&#39;,
            // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported
            type: &#39;average&#39;
        },
        {
            name: &#39;Horizontal line with Y value at 100&#39;,
            yAxis: 100
        },
        [
            {
                // Use the same name with starting and ending point
                name: &#39;Minimum to Maximum&#39;,
                type: &#39;min&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],
    [
            {
                name: &#39;Markline between two points&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [{
            // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
            yAxis: &#39;max&#39;,
            x: &#39;90%&#39;
        }, {
            type: &#39;max&#39;
        }],
    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field06] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field16] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine3(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-scatter.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label128] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle111] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis45] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur32] = Field(
        None,
        description='<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',
    )
    data: Optional[Data7] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-scatter.markLine.data.0.x">x</a>, <a href="#series-scatter.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-scatter.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-scatter.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-scatter.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-scatter.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>\n<pre><code>data: [\n\n{\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n[\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName160(_StyleName3):
    pass


class Rich160(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName160] = Field(
        None, alias='<style_name>', description=''
    )


class Label137(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich160] = Field(
        None,
        description='<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',
    )


class ItemStyle93(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName161(_StyleName3):
    pass


class Rich161(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName161] = Field(
        None, alias='<style_name>', description=''
    )


class Label138(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich161] = Field(
        None,
        description='<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',
    )


class ItemStyle94(HandleStyle1):
    pass


class Emphasis48(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label138] = Field(None, description='')
    itemStyle: Optional[ItemStyle94] = Field(None, description='')


class _StyleName162(_StyleName3):
    pass


class Rich162(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName162] = Field(
        None, alias='<style_name>', description=''
    )


class Label139(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich162] = Field(
        None,
        description='<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',
    )


class ItemStyle95(HandleStyle1):
    pass


class Blur35(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label139] = Field(None, description='')
    itemStyle: Optional[ItemStyle95] = Field(None, description='')


class ItemStyle96(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName163(_StyleName3):
    pass


class Rich163(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName163] = Field(
        None, alias='<style_name>', description=''
    )


class Label140(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich163] = Field(
        None,
        description='<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',
    )


class ItemStyle97(HandleStyle1):
    pass


class _StyleName164(_StyleName3):
    pass


class Rich164(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName164] = Field(
        None, alias='<style_name>', description=''
    )


class Label141(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich164] = Field(
        None,
        description='<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',
    )


class Emphasis49(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle97] = Field(None, description='')
    label: Optional[Label141] = Field(None, description='')


class ItemStyle98(HandleStyle1):
    pass


class _StyleName165(_StyleName3):
    pass


class Rich165(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName165] = Field(
        None, alias='<style_name>', description=''
    )


class Label142(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich165] = Field(
        None,
        description='<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',
    )


class Blur36(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle98] = Field(None, description='')
    label: Optional[Label142] = Field(None, description='')


class Field07(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-scatter.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-scatter.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle96] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label140] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis49] = Field(None, description='')
    blur: Optional[Blur36] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle99(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName166(_StyleName3):
    pass


class Rich166(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName166] = Field(
        None, alias='<style_name>', description=''
    )


class Label143(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich166] = Field(
        None,
        description='<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',
    )


class ItemStyle100(HandleStyle1):
    pass


class _StyleName167(_StyleName3):
    pass


class Rich167(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName167] = Field(
        None, alias='<style_name>', description=''
    )


class Label144(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich167] = Field(
        None,
        description='<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',
    )


class Emphasis50(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle100] = Field(None, description='')
    label: Optional[Label144] = Field(None, description='')


class ItemStyle101(HandleStyle1):
    pass


class _StyleName168(_StyleName3):
    pass


class Rich168(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName168] = Field(
        None, alias='<style_name>', description=''
    )


class Label145(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich168] = Field(
        None,
        description='<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',
    )


class Blur37(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle101] = Field(None, description='')
    label: Optional[Label145] = Field(None, description='')


class Field17(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-scatter.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-scatter.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle99] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label143] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis50] = Field(None, description='')
    blur: Optional[Blur37] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data8(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-scatter.markArea.data.0.x">x</a>, <a href="#series-scatter.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <ol start="2">
    <li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using
    <a href="#series-scatter.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>
    </li>
    <li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-scatter.markArea.data.0.type">type</a>, where <a href="#series-scatter.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-scatter.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>
    </li>
    <li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [


        [
            {
                name: &#39;From average to max&#39;,
                type: &#39;average&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],

        [
            {
                name: &#39;Mark area between two points in data coordiantes&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [
            {
                name: &#39;From 60 to 80&#39;,
                yAxis: 60
            },
            {
                yAxis: 80
            }
        ], [
            {
                name: &#39;Mark area covers all data&#39;
                coord: [&#39;min&#39;, &#39;min&#39;]
            },
            {
                coord: [&#39;max&#39;, &#39;max&#39;]
            }
        ],
    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field07] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field17] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea3(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label137] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle93] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis48] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur35] = Field(
        None,
        description='<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',
    )
    data: Optional[Data8] = Field(
        None,
        description='<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-scatter.markArea.data.0.x">x</a>, <a href="#series-scatter.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>\n</ol>\n<ol start="2">\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href="#series-scatter.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n<li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-scatter.markArea.data.0.type">type</a>, where <a href="#series-scatter.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-scatter.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>\n</li>\n<li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition3(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class TextStyle24(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip12(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle24] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series4(BaseModel):
    """
        <p>Scatter (bubble) chart . The scatter chart in <a href="#grid">rectangular coordinate</a> could be used to present the relation between  <code class="codespan">x</code> and <code class="codespan">y</code>. If data have multiple dimensions, the values of the other dimensions can be visualized through <a href="#series-scatter.symbol">symbol</a> with various sizes and colors, which becomes a bubble chart. These can be done by using with <a href="#visualMap">visualMap</a> component.</p>
    <p>It could be used with <a href="#grid">rectangular coordinate</a> and <a href="#polar">polar coordinate</a> and <a href="#geo">geographical coordinate</a>.</p>

    """

    type: Optional[str] = Field('scatter', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    coordinateSystem: Optional[str] = Field(
        'cartesian2d',
        description='<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-bar.xAxisIndex">xAxisIndex</a> and <a href="#series-bar.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href="#series-bar.polarIndex">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href="#series-bar.geoIndex">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    polarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#polar">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n',
    )
    geoIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#geo">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n',
    )
    calendarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#calendar">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'circle',
        description='\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-scatter.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        10,
        description='\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-scatter.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-scatter.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    large: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class="codespan">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can&#39;t be customized any more.</p>\n',
    )
    largeThreshold: Optional[float] = Field(
        2000,
        description='\n\n<p>The threshold enabling the drawing optimization.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    label: Optional[Label115] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine21] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    labelLayout: Optional[LabelLayout3] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle80] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    emphasis: Optional[Emphasis41] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur29] = Field(
        None,
        description='<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-scatter.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select8] = Field(
        None,
        description='<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-scatter.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    progressive: Optional[float] = Field(
        400,
        description='<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: Optional[float] = Field(
        3000,
        description='<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    seriesLayoutBy: Optional[str] = Field(
        'column',
        description='<p>When <a href="#dataset">dataset</a> is used, <code class="codespan">seriesLayoutBy</code> specifies whether the column or the row of <code class="codespan">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class="codespan">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：the rows of <code class="codespan">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href="http://localhost/echarts-website/examples/en/editor.html?c=dataset-series-layout-by" target="_blank">example</a>.</p>\n',
    )
    datasetIndex: Optional[float] = Field(
        0,
        description='<p>If <a href="#series.data">series.data</a> is not specified, and <a href="#dataset">dataset</a> exists, the series will use <code class="codespan">dataset</code>. <code class="codespan">datasetIndex</code> specifies which dataset will be used.</p>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum14]] = Field(
        None,
        description='<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class="codespan">data</code> specified in series, and there is <a href="#dataset">dataset</a> in option, series will use the first <a href="#dataset">dataset</a> as its datasource. If <code class="codespan">data</code> has been specified, <a href="#dataset">dataset</a> will not used.</p>\n<p><code class="codespan">series.datasetIndex</code> can be used to specify other <a href="#dataset">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class="lang-ts">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href="#grid">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#xAxis">xAxis</a> and <a href="#yAxis">yAxis</a> respectively.</li>\n<li>In <a href="#polar">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#radiusAxis">radiusAxis</a> and <a href="#angleAxis">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href="#visualMap">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href="#series.symbolSize">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href="#tooltip.formatter">tooltip.formatter</a> or <a href="#series.label.formatter">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class="codespan">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class="lang-ts">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href="#xAxis.type">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class="codespan">&#39;value&#39;</code> or <code class="codespan">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class="codespan">number</code> (like <code class="codespan">12</code>) (can also be a number in a <code class="codespan">string</code> format, like <code class="codespan">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class="codespan">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class="codespan">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class="lang-ts">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-punchCard" target="_blank">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class="codespan">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class="codespan">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15" target="_blank">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href="https://momentjs.com/" target="_blank">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class="codespan">&#39;2012-03&#39;</code>, <code class="codespan">&#39;2012-03-01&#39;</code>, <code class="codespan">&#39;2012-03-01 05&#39;</code>, <code class="codespan">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class="codespan">&quot;T&quot;</code> or a space: <code class="codespan">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class="codespan">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class="codespan">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class="codespan">&#39;2012&#39;</code>, <code class="codespan">&#39;2012-3-1&#39;</code>, <code class="codespan">&#39;2012/3/1&#39;</code>, <code class="codespan">&#39;2012/03/01&#39;</code>,\n<code class="codespan">&#39;2009/6/12 2:00&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href="https://dygraphs.com/date-formats.html" target="_blank">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class="codespan">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> and <code class="codespan">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class="codespan">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href="https://momentjs.com/" target="_blank">moment</a>), or use <code class="codespan">echarts.number.parseDate</code>, or check <a href="https://dygraphs.com/date-formats.html" target="_blank">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class="codespan">value</code> reprensent real value. For example:</p>\n<pre><code class="lang-ts">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class="codespan">&#39;-&#39;</code> or <code class="codespan">null</code> or <code class="codespan">undefined</code> or <code class="codespan">NaN</code> can be used to describe that a data item does not exist (ps：<em>not exist</em> does not means its value is <code class="codespan">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n',
    )
    markPoint: Optional[MarkPoint3] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine3] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea3] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    clip: Optional[bool] = Field(
        True,
        description='\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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in Scatter.</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in Scatter, 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition3] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip12] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class RippleEffect(BaseModel):
    """
    <p>Related configurations about ripple effect.</p>

    """

    color: Optional[str] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v4.4.0</code></p>\n</blockquote>\n\n\n<p>Color of the ripple rings. The default value is the color of scatter.</p>\n',
    )
    number: Optional[float] = Field(
        3,
        description='<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n\n\n<p>The number of ripples.</p>\n',
    )
    period: Optional[float] = Field(
        4, description='\n\n<p>The period duration of animation, in seconds.</p>\n'
    )
    scale: Optional[float] = Field(
        2.5,
        description='\n\n<p>The maximum zooming scale of ripples in animation.</p>\n',
    )
    brushType: Optional[str] = Field(
        'fill',
        description='\n\n<p>The brush type for ripples. options: <code class="codespan">&#39;stroke&#39;</code> and <code class="codespan">&#39;fill&#39;</code>.</p>\n',
    )


class _StyleName169(_StyleName3):
    pass


class Rich169(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName169] = Field(
        None, alias='<style_name>', description=''
    )


class Label146(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich169] = Field(
        None,
        description='<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',
    )


class LineStyle120(LineStyle51):
    pass


class LabelLine29(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle120] = Field(None, description='')


class LabelLayout4(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class ItemStyle102(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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<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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName170(_StyleName3):
    pass


class Rich170(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName170] = Field(
        None, alias='<style_name>', description=''
    )


class Label147(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich170] = Field(
        None,
        description='<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',
    )


class LineStyle121(LineStyle51):
    pass


class LabelLine30(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle121] = Field(None, description='')


class ItemStyle103(HandleStyle1):
    pass


class Emphasis51(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    scale: Optional[Union[bool, float]] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n\n\n<p>Whether to scale to highlight the data in emphasis state. <code class="codespan">number</code> has been supported since <code class="codespan">v5.3.2</code>, the default scale value is 1.1.</p>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label147] = Field(None, description='')
    labelLine: Optional[LabelLine30] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle103] = Field(None, description='')


class _StyleName171(_StyleName3):
    pass


class Rich171(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName171] = Field(
        None, alias='<style_name>', description=''
    )


class Label148(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich171] = Field(
        None,
        description='<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',
    )


class LineStyle122(LineStyle51):
    pass


class LabelLine31(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle122] = Field(None, description='')


class ItemStyle104(HandleStyle1):
    pass


class Blur38(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-effectScatter.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    label: Optional[Label148] = Field(None, description='')
    labelLine: Optional[LabelLine31] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle104] = Field(None, description='')


class _StyleName172(_StyleName3):
    pass


class Rich172(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName172] = Field(
        None, alias='<style_name>', description=''
    )


class Label149(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich172] = Field(
        None,
        description='<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',
    )


class LineStyle123(LineStyle51):
    pass


class LabelLine32(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle123] = Field(None, description='')


class ItemStyle105(HandleStyle1):
    pass


class Select10(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-effectScatter.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label149] = Field(None, description='')
    labelLine: Optional[LabelLine32] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle105] = Field(None, description='')


class _StyleName173(_StyleName3):
    pass


class Rich173(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName173] = Field(
        None, alias='<style_name>', description=''
    )


class Label150(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich173] = Field(
        None,
        description='<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',
    )


class LineStyle124(LineStyle51):
    pass


class LabelLine33(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle124] = Field(None, description='')


class ItemStyle106(HandleStyle1):
    pass


class _StyleName174(_StyleName3):
    pass


class Rich174(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName174] = Field(
        None, alias='<style_name>', description=''
    )


class Label151(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich174] = Field(
        None,
        description='<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',
    )


class LineStyle125(LineStyle51):
    pass


class LabelLine34(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle125] = Field(None, description='')


class ItemStyle107(HandleStyle1):
    pass


class Emphasis52(BaseModel):
    """
    <p>Emphasis state of the specified single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label151] = Field(None, description='')
    labelLine: Optional[LabelLine34] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle107] = Field(None, description='')


class _StyleName175(_StyleName3):
    pass


class Rich175(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName175] = Field(
        None, alias='<style_name>', description=''
    )


class Label152(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich175] = Field(
        None,
        description='<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',
    )


class LineStyle126(LineStyle51):
    pass


class LabelLine35(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle126] = Field(None, description='')


class ItemStyle108(HandleStyle1):
    pass


class Blur39(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of the specified single data.</p>

    """

    label: Optional[Label152] = Field(None, description='')
    labelLine: Optional[LabelLine35] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle108] = Field(None, description='')


class _StyleName176(_StyleName3):
    pass


class Rich176(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName176] = Field(
        None, alias='<style_name>', description=''
    )


class Label153(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich176] = Field(
        None,
        description='<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',
    )


class LineStyle127(LineStyle51):
    pass


class LabelLine36(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle127] = Field(None, description='')


class ItemStyle109(HandleStyle1):
    pass


class Select11(BaseModel):
    """
    <p>Select state of the specified single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label153] = Field(None, description='')
    labelLine: Optional[LabelLine36] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle109] = Field(None, description='')


class TextStyle25(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip13(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle25] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum16(BaseModel):
    symbol: Optional[str] = Field(
        'circle',
        description='\n\n<p>Symbol of single data.</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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        4,
        description='\n\n<p>single data 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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate degree of single data 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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code 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',
    )
    label: Optional[Label150] = Field(None, description='')
    labelLine: Optional[LabelLine33] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle106] = Field(None, description='')
    emphasis: Optional[Emphasis52] = Field(
        None, description='<p>Emphasis state of the specified single data.</p>\n'
    )
    blur: Optional[Blur39] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of the specified single data.</p>\n',
    )
    select: Optional[Select11] = Field(
        None, description='<p>Select state of the specified single data.</p>\n'
    )
    tooltip: Optional[Tooltip13] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class _StyleName177(_StyleName3):
    pass


class Rich177(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName177] = Field(
        None, alias='<style_name>', description=''
    )


class Label154(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich177] = Field(
        None,
        description='<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',
    )


class ItemStyle110(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName178(_StyleName3):
    pass


class Rich178(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName178] = Field(
        None, alias='<style_name>', description=''
    )


class Label155(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich178] = Field(
        None,
        description='<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',
    )


class ItemStyle111(HandleStyle1):
    pass


class Emphasis53(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label155] = Field(None, description='')
    itemStyle: Optional[ItemStyle111] = Field(None, description='')


class _StyleName179(_StyleName3):
    pass


class Rich179(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName179] = Field(
        None, alias='<style_name>', description=''
    )


class Label156(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich179] = Field(
        None,
        description='<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',
    )


class ItemStyle112(HandleStyle1):
    pass


class Blur40(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label156] = Field(None, description='')
    itemStyle: Optional[ItemStyle112] = Field(None, description='')


class ItemStyle113(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName180(_StyleName3):
    pass


class Rich180(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName180] = Field(
        None, alias='<style_name>', description=''
    )


class Label157(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich180] = Field(
        None,
        description='<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',
    )


class _StyleName181(_StyleName3):
    pass


class Rich181(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName181] = Field(
        None, alias='<style_name>', description=''
    )


class Label158(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich181] = Field(
        None,
        description='<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',
    )


class ItemStyle114(HandleStyle1):
    pass


class Emphasis54(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label158] = Field(None, description='')
    itemStyle: Optional[ItemStyle114] = Field(None, description='')


class Datum17(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Available when using <a href="#series-effectScatter.markPoint.data.type">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class="codespan">0</code> (xAxis, radiusAxis), <code class="codespan">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-effectScatter.markPoint.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle113] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label157] = Field(None, description='')
    emphasis: Optional[Emphasis54] = Field(None, description='')


class MarkPoint4(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-effectScatter.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-effectScatter.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-effectScatter.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label154] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle110] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis53] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur40] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum17]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-effectScatter.markPoint.data.x">x</a>, <a href="#series-effectScatter.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-effectScatter.markPoint.data.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-effectScatter.markPoint.data.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-effectScatter.markPoint.data.valueIndex">valueIndex</a> or <a href="#series-effectScatter.markPoint.data.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName182(_StyleName3):
    pass


class Rich182(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName182] = Field(
        None, alias='<style_name>', description=''
    )


class Label159(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich182] = Field(
        None,
        description='<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',
    )


class LineStyle128(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName183(_StyleName3):
    pass


class Rich183(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName183] = Field(
        None, alias='<style_name>', description=''
    )


class Label160(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich183] = Field(
        None,
        description='<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',
    )


class LineStyle129(LineStyle51):
    pass


class Emphasis55(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label160] = Field(None, description='')
    lineStyle: Optional[LineStyle129] = Field(None, description='')


class _StyleName184(_StyleName3):
    pass


class Rich184(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName184] = Field(
        None, alias='<style_name>', description=''
    )


class Label161(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich184] = Field(
        None,
        description='<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',
    )


class LineStyle130(LineStyle51):
    pass


class Blur41(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label161] = Field(None, description='')
    lineStyle: Optional[LineStyle130] = Field(None, description='')


class LineStyle131(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName185(_StyleName3):
    pass


class Rich185(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName185] = Field(
        None, alias='<style_name>', description=''
    )


class Label162(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich185] = Field(
        None,
        description='<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',
    )


class LineStyle132(LineStyle60):
    pass


class _StyleName186(_StyleName3):
    pass


class Rich186(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName186] = Field(
        None, alias='<style_name>', description=''
    )


class Label163(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich186] = Field(
        None,
        description='<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',
    )


class Emphasis56(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle132] = Field(None, description='')
    label: Optional[Label163] = Field(None, description='')


class LineStyle133(LineStyle60):
    pass


class _StyleName187(_StyleName3):
    pass


class Rich187(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName187] = Field(
        None, alias='<style_name>', description=''
    )


class Label164(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich187] = Field(
        None,
        description='<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',
    )


class Blur42(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle133] = Field(None, description='')
    label: Optional[Label164] = Field(None, description='')


class Field08(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-effectScatter.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-effectScatter.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle131] = Field(
        None,
        description='<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',
    )
    label: Optional[Label162] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis56] = Field(None, description='')
    blur: Optional[Blur42] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle134(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName188(_StyleName3):
    pass


class Rich188(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName188] = Field(
        None, alias='<style_name>', description=''
    )


class Label165(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich188] = Field(
        None,
        description='<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',
    )


class LineStyle135(LineStyle60):
    pass


class _StyleName189(_StyleName3):
    pass


class Rich189(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName189] = Field(
        None, alias='<style_name>', description=''
    )


class Label166(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich189] = Field(
        None,
        description='<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',
    )


class Emphasis57(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle135] = Field(None, description='')
    label: Optional[Label166] = Field(None, description='')


class LineStyle136(LineStyle60):
    pass


class _StyleName190(_StyleName3):
    pass


class Rich190(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName190] = Field(
        None, alias='<style_name>', description=''
    )


class Label167(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich190] = Field(
        None,
        description='<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',
    )


class Blur43(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle136] = Field(None, description='')
    label: Optional[Label167] = Field(None, description='')


class Field18(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-effectScatter.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-effectScatter.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle134] = Field(
        None,
        description='<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',
    )
    label: Optional[Label165] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis57] = Field(None, description='')
    blur: Optional[Blur43] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data9(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-effectScatter.markLine.data.0.x">x</a>, <a href="#series-effectScatter.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <ol start="2">
    <li><p>Assign coordinate position with <a href="#series-effectScatter.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>
    </li>
    <li><p>Use <a href="#series-effectScatter.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-effectScatter.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-effectScatter.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>
    </li>
    <li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>
    </li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>
    <pre><code>data: [

    {
            name: &#39;average line&#39;,
            // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported
            type: &#39;average&#39;
        },
        {
            name: &#39;Horizontal line with Y value at 100&#39;,
            yAxis: 100
        },
        [
            {
                // Use the same name with starting and ending point
                name: &#39;Minimum to Maximum&#39;,
                type: &#39;min&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],
    [
            {
                name: &#39;Markline between two points&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [{
            // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
            yAxis: &#39;max&#39;,
            x: &#39;90%&#39;
        }, {
            type: &#39;max&#39;
        }],
    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field08] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field18] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine4(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-effectScatter.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label159] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle128] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis55] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur41] = Field(
        None,
        description='<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',
    )
    data: Optional[Data9] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-effectScatter.markLine.data.0.x">x</a>, <a href="#series-effectScatter.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-effectScatter.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-effectScatter.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-effectScatter.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-effectScatter.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>\n<pre><code>data: [\n\n{\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n[\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName191(_StyleName3):
    pass


class Rich191(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName191] = Field(
        None, alias='<style_name>', description=''
    )


class Label168(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich191] = Field(
        None,
        description='<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',
    )


class ItemStyle115(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName192(_StyleName3):
    pass


class Rich192(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName192] = Field(
        None, alias='<style_name>', description=''
    )


class Label169(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich192] = Field(
        None,
        description='<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',
    )


class ItemStyle116(HandleStyle1):
    pass


class Emphasis58(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label169] = Field(None, description='')
    itemStyle: Optional[ItemStyle116] = Field(None, description='')


class _StyleName193(_StyleName3):
    pass


class Rich193(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName193] = Field(
        None, alias='<style_name>', description=''
    )


class Label170(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich193] = Field(
        None,
        description='<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',
    )


class ItemStyle117(HandleStyle1):
    pass


class Blur44(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label170] = Field(None, description='')
    itemStyle: Optional[ItemStyle117] = Field(None, description='')


class ItemStyle118(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName194(_StyleName3):
    pass


class Rich194(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName194] = Field(
        None, alias='<style_name>', description=''
    )


class Label171(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich194] = Field(
        None,
        description='<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',
    )


class ItemStyle119(HandleStyle1):
    pass


class _StyleName195(_StyleName3):
    pass


class Rich195(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName195] = Field(
        None, alias='<style_name>', description=''
    )


class Label172(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich195] = Field(
        None,
        description='<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',
    )


class Emphasis59(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle119] = Field(None, description='')
    label: Optional[Label172] = Field(None, description='')


class ItemStyle120(HandleStyle1):
    pass


class _StyleName196(_StyleName3):
    pass


class Rich196(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName196] = Field(
        None, alias='<style_name>', description=''
    )


class Label173(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich196] = Field(
        None,
        description='<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',
    )


class Blur45(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle120] = Field(None, description='')
    label: Optional[Label173] = Field(None, description='')


class Field09(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-effectScatter.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-effectScatter.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle118] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label171] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis59] = Field(None, description='')
    blur: Optional[Blur45] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle121(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName197(_StyleName3):
    pass


class Rich197(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName197] = Field(
        None, alias='<style_name>', description=''
    )


class Label174(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich197] = Field(
        None,
        description='<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',
    )


class ItemStyle122(HandleStyle1):
    pass


class _StyleName198(_StyleName3):
    pass


class Rich198(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName198] = Field(
        None, alias='<style_name>', description=''
    )


class Label175(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich198] = Field(
        None,
        description='<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',
    )


class Emphasis60(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle122] = Field(None, description='')
    label: Optional[Label175] = Field(None, description='')


class ItemStyle123(HandleStyle1):
    pass


class _StyleName199(_StyleName3):
    pass


class Rich199(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName199] = Field(
        None, alias='<style_name>', description=''
    )


class Label176(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich199] = Field(
        None,
        description='<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',
    )


class Blur46(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle123] = Field(None, description='')
    label: Optional[Label176] = Field(None, description='')


class Field19(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-effectScatter.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-effectScatter.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle121] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label174] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis60] = Field(None, description='')
    blur: Optional[Blur46] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data10(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-effectScatter.markArea.data.0.x">x</a>, <a href="#series-effectScatter.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <ol start="2">
    <li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using
    <a href="#series-effectScatter.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>
    </li>
    <li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-effectScatter.markArea.data.0.type">type</a>, where <a href="#series-effectScatter.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-effectScatter.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>
    </li>
    <li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [


        [
            {
                name: &#39;From average to max&#39;,
                type: &#39;average&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],

        [
            {
                name: &#39;Mark area between two points in data coordiantes&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [
            {
                name: &#39;From 60 to 80&#39;,
                yAxis: 60
            },
            {
                yAxis: 80
            }
        ], [
            {
                name: &#39;Mark area covers all data&#39;
                coord: [&#39;min&#39;, &#39;min&#39;]
            },
            {
                coord: [&#39;max&#39;, &#39;max&#39;]
            }
        ],
    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field09] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field19] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea4(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label168] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle115] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis58] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur44] = Field(
        None,
        description='<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',
    )
    data: Optional[Data10] = Field(
        None,
        description='<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-effectScatter.markArea.data.0.x">x</a>, <a href="#series-effectScatter.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>\n</ol>\n<ol start="2">\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href="#series-effectScatter.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n<li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-effectScatter.markArea.data.0.type">type</a>, where <a href="#series-effectScatter.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-effectScatter.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>\n</li>\n<li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class TextStyle26(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip14(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle26] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series5(BaseModel):
    """
        <p>The scatter (bubble) graph with ripple animation. The special animation effect can visually highlights some data.</p>
    <p><strong>Tip:</strong>  The effects of map was achieved through markPoint in ECharts 2.x. However, in  ECharts 3, effectScatter on geographic coordinate is recommended for achieving that effects of map.</p>

    """

    type: Optional[str] = Field('effectScatter', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    effectType: Optional[str] = Field(
        'ripple',
        description='\n\n<p>Type of effect. Only ripple effect of <code class="codespan">&#39;ripple&#39;</code> is supported currently.</p>\n',
    )
    showEffectOn: Optional[str] = Field(
        'render',
        description='\n\n<p>When to show the effect.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class="codespan">&#39;render&#39;</code> Show the effect when rendering is done.</li>\n<li><code class="codespan">&#39;emphasis&#39;</code> Show the effect when it is highlight (hover).</li>\n</ul>\n',
    )
    rippleEffect: Optional[RippleEffect] = Field(
        None, description='<p>Related configurations about ripple effect.</p>\n'
    )
    coordinateSystem: Optional[str] = Field(
        'cartesian2d',
        description='<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-bar.xAxisIndex">xAxisIndex</a> and <a href="#series-bar.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href="#series-bar.polarIndex">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href="#series-bar.geoIndex">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    polarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#polar">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n',
    )
    geoIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#geo">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n',
    )
    calendarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#calendar">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'circle',
        description='\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-effectScatter.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        10,
        description='\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-effectScatter.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-effectScatter.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    label: Optional[Label146] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine29] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    labelLayout: Optional[LabelLayout4] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle102] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    emphasis: Optional[Emphasis51] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur38] = Field(
        None,
        description='<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-effectScatter.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select10] = Field(
        None,
        description='<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-effectScatter.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    seriesLayoutBy: Optional[str] = Field(
        'column',
        description='<p>When <a href="#dataset">dataset</a> is used, <code class="codespan">seriesLayoutBy</code> specifies whether the column or the row of <code class="codespan">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class="codespan">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：the rows of <code class="codespan">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href="http://localhost/echarts-website/examples/en/editor.html?c=dataset-series-layout-by" target="_blank">example</a>.</p>\n',
    )
    datasetIndex: Optional[float] = Field(
        0,
        description='<p>If <a href="#series.data">series.data</a> is not specified, and <a href="#dataset">dataset</a> exists, the series will use <code class="codespan">dataset</code>. <code class="codespan">datasetIndex</code> specifies which dataset will be used.</p>\n',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    data: Optional[List[Datum16]] = Field(
        None,
        description='<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class="codespan">data</code> specified in series, and there is <a href="#dataset">dataset</a> in option, series will use the first <a href="#dataset">dataset</a> as its datasource. If <code class="codespan">data</code> has been specified, <a href="#dataset">dataset</a> will not used.</p>\n<p><code class="codespan">series.datasetIndex</code> can be used to specify other <a href="#dataset">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class="lang-ts">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href="#grid">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#xAxis">xAxis</a> and <a href="#yAxis">yAxis</a> respectively.</li>\n<li>In <a href="#polar">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#radiusAxis">radiusAxis</a> and <a href="#angleAxis">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href="#visualMap">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href="#series.symbolSize">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href="#tooltip.formatter">tooltip.formatter</a> or <a href="#series.label.formatter">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class="codespan">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class="lang-ts">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href="#xAxis.type">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class="codespan">&#39;value&#39;</code> or <code class="codespan">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class="codespan">number</code> (like <code class="codespan">12</code>) (can also be a number in a <code class="codespan">string</code> format, like <code class="codespan">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class="codespan">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class="codespan">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class="lang-ts">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-punchCard" target="_blank">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class="codespan">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class="codespan">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15" target="_blank">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href="https://momentjs.com/" target="_blank">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class="codespan">&#39;2012-03&#39;</code>, <code class="codespan">&#39;2012-03-01&#39;</code>, <code class="codespan">&#39;2012-03-01 05&#39;</code>, <code class="codespan">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class="codespan">&quot;T&quot;</code> or a space: <code class="codespan">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class="codespan">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class="codespan">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class="codespan">&#39;2012&#39;</code>, <code class="codespan">&#39;2012-3-1&#39;</code>, <code class="codespan">&#39;2012/3/1&#39;</code>, <code class="codespan">&#39;2012/03/01&#39;</code>,\n<code class="codespan">&#39;2009/6/12 2:00&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href="https://dygraphs.com/date-formats.html" target="_blank">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class="codespan">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> and <code class="codespan">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class="codespan">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href="https://momentjs.com/" target="_blank">moment</a>), or use <code class="codespan">echarts.number.parseDate</code>, or check <a href="https://dygraphs.com/date-formats.html" target="_blank">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class="codespan">value</code> reprensent real value. For example:</p>\n<pre><code class="lang-ts">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class="codespan">&#39;-&#39;</code> or <code class="codespan">null</code> or <code class="codespan">undefined</code> or <code class="codespan">NaN</code> can be used to describe that a data item does not exist (ps：<em>not exist</em> does not means its value is <code class="codespan">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n',
    )
    markPoint: Optional[MarkPoint4] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine4] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea4] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    clip: Optional[bool] = Field(
        True,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.1.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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    tooltip: Optional[Tooltip14] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName200(_StyleName3):
    pass


class Rich200(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName200] = Field(
        None, alias='<style_name>', description=''
    )


class Label177(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'top',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich200] = Field(
        None,
        description='<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',
    )


class LabelLayout5(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class Decal8(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>
    <p>It works only if <code class="codespan">areaStyle</code> is set.</p>

    """

    pass


class ItemStyle124(BaseModel):
    """
    <p>Item style of the inflection point of the lines.</p>

    """

    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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<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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal8] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n<p>It works only if <code class="codespan">areaStyle</code> is set.</p>\n',
    )


class LineStyle137(BaseModel):
    """
    <p>Line style.</p>

    """

    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(0, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'round',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AreaStyle12(BaseModel):
    """
    <p>Area filling style.</p>

    """

    color: Optional[Any] = Field(
        '"#000"',
        description='\n\n<p>Fill 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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.7,
        description='\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',
    )


class ItemStyle125(ItemStyle15):
    pass


class _StyleName201(_StyleName3):
    pass


class Rich201(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName201] = Field(
        None, alias='<style_name>', description=''
    )


class Label178(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich201] = Field(
        None,
        description='<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',
    )


class LineStyle138(BaseModel):
    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(0, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'round',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AreaStyle13(AreaStyle9):
    pass


class Emphasis61(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    itemStyle: Optional[ItemStyle125] = Field(None, description='')
    label: Optional[Label178] = Field(None, description='')
    lineStyle: Optional[LineStyle138] = Field(None, description='')
    areaStyle: Optional[AreaStyle13] = Field(None, description='')


class ItemStyle126(HandleStyle1):
    pass


class _StyleName202(_StyleName3):
    pass


class Rich202(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName202] = Field(
        None, alias='<style_name>', description=''
    )


class Label179(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich202] = Field(
        None,
        description='<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',
    )


class LineStyle139(LineStyle137):
    pass


class AreaStyle14(AreaStyle9):
    pass


class Blur47(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-radar.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    itemStyle: Optional[ItemStyle126] = Field(None, description='')
    label: Optional[Label179] = Field(None, description='')
    lineStyle: Optional[LineStyle139] = Field(None, description='')
    areaStyle: Optional[AreaStyle14] = Field(None, description='')


class ItemStyle127(HandleStyle1):
    pass


class _StyleName203(_StyleName3):
    pass


class Rich203(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName203] = Field(
        None, alias='<style_name>', description=''
    )


class Label180(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich203] = Field(
        None,
        description='<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',
    )


class LineStyle140(LineStyle137):
    pass


class AreaStyle15(AreaStyle9):
    pass


class Select12(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-radar.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle127] = Field(None, description='')
    label: Optional[Label180] = Field(None, description='')
    lineStyle: Optional[LineStyle140] = Field(None, description='')
    areaStyle: Optional[AreaStyle15] = Field(None, description='')


class _StyleName204(_StyleName3):
    pass


class Rich204(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName204] = Field(
        None, alias='<style_name>', description=''
    )


class Label181(BaseModel):
    """
    <p>Style setting of the text on single inflection point.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'top',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich204] = Field(
        None,
        description='<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',
    )


class ItemStyle128(HandleStyle1):
    """
    <p>Style setting of the symbol on single inflection point.</p>

    """

    pass


class LineStyle141(LineStyle137):
    """
    <p>Line style of a single item.</p>

    """

    pass


class AreaStyle16(AreaStyle12):
    """
    <p>Area filling style of a single item.</p>

    """

    pass


class ItemStyle129(ItemStyle15):
    pass


class _StyleName205(_StyleName3):
    pass


class Rich205(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName205] = Field(
        None, alias='<style_name>', description=''
    )


class Label182(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich205] = Field(
        None,
        description='<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',
    )


class LineStyle142(LineStyle138):
    pass


class AreaStyle17(AreaStyle9):
    pass


class Emphasis62(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    itemStyle: Optional[ItemStyle129] = Field(None, description='')
    label: Optional[Label182] = Field(None, description='')
    lineStyle: Optional[LineStyle142] = Field(None, description='')
    areaStyle: Optional[AreaStyle17] = Field(None, description='')


class ItemStyle130(HandleStyle1):
    pass


class _StyleName206(_StyleName3):
    pass


class Rich206(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName206] = Field(
        None, alias='<style_name>', description=''
    )


class Label183(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich206] = Field(
        None,
        description='<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',
    )


class LineStyle143(LineStyle137):
    pass


class AreaStyle18(AreaStyle9):
    pass


class Blur48(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state.</p>

    """

    itemStyle: Optional[ItemStyle130] = Field(None, description='')
    label: Optional[Label183] = Field(None, description='')
    lineStyle: Optional[LineStyle143] = Field(None, description='')
    areaStyle: Optional[AreaStyle18] = Field(None, description='')


class ItemStyle131(HandleStyle1):
    pass


class _StyleName207(_StyleName3):
    pass


class Rich207(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName207] = Field(
        None, alias='<style_name>', description=''
    )


class Label184(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich207] = Field(
        None,
        description='<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',
    )


class LineStyle144(LineStyle137):
    pass


class AreaStyle19(AreaStyle9):
    pass


class Select13(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of selected state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle131] = Field(None, description='')
    label: Optional[Label184] = Field(None, description='')
    lineStyle: Optional[LineStyle144] = Field(None, description='')
    areaStyle: Optional[AreaStyle19] = Field(None, description='')


class TextStyle27(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip15(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle27] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum18(BaseModel):
    name: Optional[str] = Field(None, description='<p>Data item name</p>\n')
    value: Optional[float] = Field(
        None, description='<p>Numerical value of a single data item.</p>\n'
    )
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    symbol: Optional[str] = Field(
        'circle',
        description='\n\n<p>Symbol of single data.</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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        4,
        description='\n\n<p>single data 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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate degree of single data 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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Offset of single data symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code 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',
    )
    label: Optional[Label181] = Field(
        None,
        description='<p>Style setting of the text on single inflection point.</p>\n',
    )
    itemStyle: Optional[ItemStyle128] = Field(
        None,
        description='<p>Style setting of the symbol on single inflection point.</p>\n',
    )
    lineStyle: Optional[LineStyle141] = Field(
        None, description='<p>Line style of a single item.</p>\n'
    )
    areaStyle: Optional[AreaStyle16] = Field(
        None, description='<p>Area filling style of a single item.</p>\n'
    )
    emphasis: Optional[Emphasis62] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur48] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of blur state.</p>\n',
    )
    select: Optional[Select13] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of selected state.</p>\n',
    )
    tooltip: Optional[Tooltip15] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class UniversalTransition4(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class TextStyle28(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip16(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle28] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series6(BaseModel):
    """
        <p><strong>radar chart</strong></p>
    <p>Radar chart is mainly used to show multi-variable data, such as the analysis of a football player&#39;s varied attributes. It relies <a href="#radar">radar</a> component.</p>
    <p>Here is the example of AQI data which is presented in radar chart.</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=radar-aqi&edit=1&reset=1" width="600" height="500"></iframe>


    """

    type: Optional[str] = Field('radar', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'data',
        description='\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',
    )
    radarIndex: Optional[float] = Field(
        None,
        description='<p>Index of <a href="#radar">radar</a> component that radar chart uses.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'circle',
        description='\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-radar.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        4,
        description='\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-radar.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-radar.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    label: Optional[Label177] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLayout: Optional[LabelLayout5] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle124] = Field(
        None, description='<p>Item style of the inflection point of the lines.</p>\n'
    )
    lineStyle: Optional[LineStyle137] = Field(None, description='<p>Line style.</p>\n')
    areaStyle: Optional[AreaStyle12] = Field(
        None, description='<p>Area filling style.</p>\n'
    )
    emphasis: Optional[Emphasis61] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur47] = Field(
        None,
        description='<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-radar.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select12] = Field(
        None,
        description='<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-radar.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum18]] = Field(
        None,
        description='<p>The data in radar chart is multi-variable (dimension). Here is an example:</p>\n<pre><code class="lang-ts">data : [\n    {\n        value : [4300, 10000, 28000, 35000, 50000, 19000],\n        name : &#39;Allocated Budget&#39;\n    },\n    {\n        value : [5000, 14000, 28000, 31000, 42000, 21000],\n        name : &#39;Actual Spending&#39;\n    }\n]\n</code></pre>\n<p>Among them, <code class="codespan">value</code> item array contains data that is corresponding to <a href="#radar.indicator">radar.indicator</a>.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in Radar.</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in Radar, 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition4] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip16] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class ItemStyle132(BaseModel):
    """
    <p>The style of each node in the tree, where <a href="#series-tree.itemStyle.color">itemStyle.color</a> represents the fill color of the node, to distinguish the state of the subtree corresponding to <code class="codespan">collapsing</code> or <code class="codespan">expansion</code>.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        '#c23531',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1.5,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName208(_StyleName3):
    pass


class Rich208(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName208] = Field(
        None, alias='<style_name>', description=''
    )


class Label185(BaseModel):
    """
    <p><code class="codespan">label</code> describes the style of the text corresponding to each node.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich208] = Field(
        None,
        description='<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',
    )


class LabelLayout6(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class LineStyle145(BaseModel):
    """
    <p>Defines the style of the tree edge.</p>

    """

    color: Optional[Any] = Field(
        '#ccc', description='\n\n<p>The color of the tree edge.</p>\n'
    )
    width: Optional[float] = Field(
        1.5, description='\n\n<p>The width of the tree edge.</p>\n'
    )
    curveness: Optional[float] = Field(
        0.5, description='\n\n<p>The curvature of the tree edge.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )


class ItemStyle133(ItemStyle15):
    """
    <p>该节点的样式。</p>

    """

    pass


class LineStyle146(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName209(_StyleName3):
    pass


class Rich209(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName209] = Field(
        None, alias='<style_name>', description=''
    )


class Label186(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich209] = Field(
        None,
        description='<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',
    )


class Emphasis63(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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<ul>\n<li><code class="codespan">&#39;ancestor&#39;</code> Focus on all ancestor nodes.</li>\n<li><code class="codespan">&#39;descendant&#39;</code> Focus on all descendants nodes.</li>\n</ul>\n<ul>\n<li><code class="codespan">&#39;relative&#39;</code> Focus on all ancestor and descendants nodes. (Since <code class="codespan">v5.3.3</code>)</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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    itemStyle: Optional[ItemStyle133] = Field(None, description='<p>该节点的样式。</p>\n')
    lineStyle: Optional[LineStyle146] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label186] = Field(None, description='')


class ItemStyle134(HandleStyle1):
    """
    <p>该节点的样式。</p>

    """

    pass


class LineStyle147(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName210(_StyleName3):
    pass


class Rich210(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName210] = Field(
        None, alias='<style_name>', description=''
    )


class Label187(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich210] = Field(
        None,
        description='<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',
    )


class Blur49(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-tree.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    itemStyle: Optional[ItemStyle134] = Field(None, description='<p>该节点的样式。</p>\n')
    lineStyle: Optional[LineStyle147] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label187] = Field(None, description='')


class ItemStyle135(HandleStyle1):
    """
    <p>该节点的样式。</p>

    """

    pass


class LineStyle148(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName211(_StyleName3):
    pass


class Rich211(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName211] = Field(
        None, alias='<style_name>', description=''
    )


class Label188(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich211] = Field(
        None,
        description='<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',
    )


class Select14(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-tree.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle135] = Field(None, description='<p>该节点的样式。</p>\n')
    lineStyle: Optional[LineStyle148] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label188] = Field(None, description='')


class _StyleName212(_StyleName3):
    pass


class Rich212(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName212] = Field(
        None, alias='<style_name>', description=''
    )


class Label189(BaseModel):
    """
    <p>Describes the style of the text label corresponding to the leaf node.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich212] = Field(
        None,
        description='<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',
    )


class ItemStyle136(BaseModel):
    """
    <p>The style of the leaf node in the tree.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class ItemStyle137(ItemStyle15):
    """
    <p>该节点的样式。</p>

    """

    pass


class LineStyle149(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName213(_StyleName3):
    pass


class Rich213(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName213] = Field(
        None, alias='<style_name>', description=''
    )


class Label190(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich213] = Field(
        None,
        description='<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',
    )


class Emphasis64(BaseModel):
    """
    <p>Emphasis state of leaves nodes.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle137] = Field(None, description='<p>该节点的样式。</p>\n')
    lineStyle: Optional[LineStyle149] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label190] = Field(None, description='')


class ItemStyle138(HandleStyle1):
    """
    <p>该节点的样式。</p>

    """

    pass


class LineStyle150(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName214(_StyleName3):
    pass


class Rich214(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName214] = Field(
        None, alias='<style_name>', description=''
    )


class Label191(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich214] = Field(
        None,
        description='<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',
    )


class Blur50(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of leaves nodes.</p>

    """

    itemStyle: Optional[ItemStyle138] = Field(None, description='<p>该节点的样式。</p>\n')
    lineStyle: Optional[LineStyle150] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label191] = Field(None, description='')


class ItemStyle139(HandleStyle1):
    """
    <p>该节点的样式。</p>

    """

    pass


class LineStyle151(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName215(_StyleName3):
    pass


class Rich215(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName215] = Field(
        None, alias='<style_name>', description=''
    )


class Label192(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich215] = Field(
        None,
        description='<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',
    )


class Select15(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of leaves nodes.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle139] = Field(None, description='<p>该节点的样式。</p>\n')
    lineStyle: Optional[LineStyle151] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label192] = Field(None, description='')


class Leaves(BaseModel):
    """
    <p>Leaf node special configuration, such as the above tree diagram example, the leaf node and non-leaf node label location is different.</p>

    """

    label: Optional[Label189] = Field(
        None,
        description='<p>Describes the style of the text label corresponding to the leaf node.</p>\n',
    )
    itemStyle: Optional[ItemStyle136] = Field(
        None, description='<p>The style of the leaf node in the tree.</p>\n'
    )
    emphasis: Optional[Emphasis64] = Field(
        None, description='<p>Emphasis state of leaves nodes.</p>\n'
    )
    blur: Optional[Blur50] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of leaves nodes.</p>\n',
    )
    select: Optional[Select15] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of leaves nodes.</p>\n',
    )


class ItemStyle140(ItemStyle136):
    """
    <p>The style of the node.</p>

    """

    pass


class LineStyle152(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName216(_StyleName3):
    pass


class Rich216(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName216] = Field(
        None, alias='<style_name>', description=''
    )


class Label193(BaseModel):
    """
    <p>The label of the node.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich216] = Field(
        None,
        description='<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',
    )


class ItemStyle141(ItemStyle15):
    """
    <p>该节点的样式。</p>

    """

    pass


class LineStyle153(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName217(_StyleName3):
    pass


class Rich217(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName217] = Field(
        None, alias='<style_name>', description=''
    )


class Label194(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich217] = Field(
        None,
        description='<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',
    )


class Emphasis65(BaseModel):
    """
    <p>Emphasis state of a single node.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle141] = Field(None, description='<p>该节点的样式。</p>\n')
    lineStyle: Optional[LineStyle153] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label194] = Field(None, description='')


class ItemStyle142(HandleStyle1):
    """
    <p>该节点的样式。</p>

    """

    pass


class LineStyle154(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName218(_StyleName3):
    pass


class Rich218(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName218] = Field(
        None, alias='<style_name>', description=''
    )


class Label195(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich218] = Field(
        None,
        description='<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',
    )


class Blur51(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of a single node.</p>

    """

    itemStyle: Optional[ItemStyle142] = Field(None, description='<p>该节点的样式。</p>\n')
    lineStyle: Optional[LineStyle154] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label195] = Field(None, description='')


class ItemStyle143(HandleStyle1):
    """
    <p>该节点的样式。</p>

    """

    pass


class LineStyle155(LineStyle145):
    """
    <p>Defines the style of the tree edge.</p>

    """

    pass


class _StyleName219(_StyleName3):
    pass


class Rich219(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName219] = Field(
        None, alias='<style_name>', description=''
    )


class Label196(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich219] = Field(
        None,
        description='<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',
    )


class Select16(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of a single node.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle143] = Field(None, description='<p>该节点的样式。</p>\n')
    lineStyle: Optional[LineStyle155] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label196] = Field(None, description='')


class TextStyle29(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip17(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle29] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Data11(BaseModel):
    """
        <p><a href="#series-tree.data">series-tree.data</a> the data format is a tree structure, for example：</p>
    <pre><code class="lang-javascript">{ // note that the outermost layer is an object that represents the root node of the tree.
        name: &quot;flare&quot;,    // the name of the node, the text corresponding to the current node label.
        label: {          // the special label configuration (if necessary).
            ...           // the format of the label is shown in the series-tree.label.
        },
        itemStyle: {      // the special itemStyle configuration (if necessary).
            ...           // the format of the itemstyle is shown in the series-tree.itemStyle.
        },
        children: [
            {
                name: &quot;flex&quot;,
                value: 4116,    // value, which only displayed in tooltip.
                label: {
                    ...
                },
                itemStyle: {
                    ...
                },
                collapsed: null, // If set as `true`, the node is collapsed in the initialization.
                children: [...]  // leaf nodes do not have children, can not write.
            },
            ...
        ]
    };
    </code></pre>

    """

    name: Optional[str] = Field(
        None,
        description='<p>The name of the tree node, used to identify each node.</p>\n',
    )
    value: Optional[float] = Field(
        None, description='<p>The value of the node, displayed in the tooltip.</p>\n'
    )
    collapsed: Optional[bool] = Field(
        None, description='<p>Whether to collapse node at initialization.</p>\n'
    )
    itemStyle: Optional[ItemStyle140] = Field(
        None, description='<p>The style of the node.</p>\n'
    )
    lineStyle: Optional[LineStyle152] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    label: Optional[Label193] = Field(
        None, description='<p>The label of the node.</p>\n'
    )
    emphasis: Optional[Emphasis65] = Field(
        None, description='<p>Emphasis state of a single node.</p>\n'
    )
    blur: Optional[Blur51] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of a single node.</p>\n',
    )
    select: Optional[Select16] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of a single node.</p>\n',
    )
    tooltip: Optional[Tooltip17] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'linear',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class TextStyle30(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip18(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle30] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series7(BaseModel):
    """
        <p><strong>Tree Diagram</strong></p>
    <p>The tree diagram is mainly used to visualize the tree data structure, which is a special hierarchical type with a unique root node, left subtree, and right subtree.</p>
    <p><strong>Note: Forests are not currently supported directly in a single series, and can be implemented by configuring multiple series in an option</strong></p>
    <p><strong>Tree example：</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=tree-vertical&edit=1&reset=1" width="900" height="780"></iframe>


    <p><strong>Multiple series are combined into forest：</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=tree-legend&edit=1&reset=1" width="800" height="680"></iframe>


    """

    type: Optional[str] = Field('tree', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        '12%',
        description='<p>Distance between tree component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        '12%',
        description='<p>Distance between tree component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        '12%',
        description='<p>Distance between tree component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        '12%',
        description='<p>Distance between tree component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        None, description='<p>Width of tree component. </p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        None, description='<p>Height of tree component. </p>\n'
    )
    center: Optional[Any] = Field(
        None,
        description='<p>Center of current view-port. It can be an arrary containing two <code class="codespan">number</code>s in pixels or <code class="codespan">string</code>s in percentage relative to the container width/height.\n<code class="codespan">string</code> is supported from version <code class="codespan">5.3.3</code>.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">center: [115.97, &#39;30%&#39;]\n</code></pre>\n',
    )
    zoom: Optional[float] = Field(
        1, description='<p>Zoom rate of current view-port.</p>\n'
    )
    layout: Optional[str] = Field(
        'orthogonal',
        description='\n\n<p>The layout of the tree, which can be <code class="codespan">orthogonal</code> and <code class="codespan">radial</code>. Here the <code class="codespan">orthogonal</code> layout is what we usually refer to the <code class="codespan">horizontal</code> and <code class="codespan">vertical</code> direction, the corresponding parameter value is <code class="codespan">orthogonal</code>. The <code class="codespan">radial</code> layout refers to the view that the root node as the center and each layer of nodes as the ring, the corresponding parameter value is <code class="codespan">radial</code>.</p>\n<p><strong>Orthogonal Example：</strong></p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=tree-basic&edit=1&reset=1" width="780" height="900"></iframe>\n\n\n\n<p><strong>Radial Example：</strong></p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=tree-radial&edit=1&reset=1" width="800" height="800"></iframe>\n\n',
    )
    orient: Optional[str] = Field(
        'LR',
        description='\n\n<p>The direction of the <code class="codespan">orthogonal</code> layout in the tree diagram. That means this configuration takes effect only if <code class="codespan">layout = &#39;orthogonal&#39;</code>. The corresponding directions are <code class="codespan">from left to right</code>, <code class="codespan">from right to left</code>, <code class="codespan">from top to bottom</code>, <code class="codespan">from bottom to top</code>, with shorthand values <code class="codespan">&#39;LR&#39;</code>, <code class="codespan">&#39;RL&#39;</code>, <code class="codespan">&#39;TB&#39;</code>, <code class="codespan">&#39;BT&#39;</code>.\n<strong>Note: The previous configuration value <code class="codespan">&#39;horizontal&#39;</code> is equivalent to <code class="codespan">&#39;LR&#39;</code>, <code class="codespan">&#39;vertical&#39;</code> is equivalent to <code class="codespan">&#39;TB&#39;</code>.</strong></p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        'emptyCircle',
        description='\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-tree.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        7,
        description='\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-tree.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-tree.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    edgeShape: Optional[str] = Field(
        'curve',
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v4.7.0</code></p>\n</blockquote>\n<p>The shape of the edge which is under the tree <code class="codespan">orthogonal layout</code>. There are two types of shape, curve and polyline, the corresponding values are <code class="codespan">&#39;curve&#39;</code> and <code class="codespan">&#39;polyline&#39;</code>.</p>\n<p><strong> Note: This configuration item is only valid under the <code class="codespan">orthogonal layout</code>. Errors will be reported in the development environment under the <code class="codespan">radial layout</code>. </strong></p>\n',
    )
    edgeForkPosition: Optional[str] = Field(
        '50%',
        description='\n\n<p>This is the position where the polyline branches in the subtree when the shape of the edge is a polyline in the <code class="codespan">orthogonal layout</code>. The position here refers to the percentage of the distance between the bifurcation point and the parent node of the subtree to the height of the entire subtree. The default value is <code class="codespan">&#39;50%&#39;</code>, which can be between [&#39;0&#39;, &#39;100%&#39;].</p>\n<p><strong> Note: This configuration item is only valid when <code class="codespan">edgeShape = &#39;polyline&#39;</code>. </strong></p>\n',
    )
    roam: Optional[Union[bool, str]] = Field(
        False,
        description='\n\n<p>Whether to enable mouse zooming and translating. <code class="codespan">false</code> by default. If either zooming or translating is wanted, it can be set to <code class="codespan">&#39;scale&#39;</code> or <code class="codespan">&#39;move&#39;</code>. Otherwise, set it to be <code class="codespan">true</code> to enable both.</p>\n',
    )
    expandAndCollapse: Optional[bool] = Field(
        True,
        description='\n\n<p>Subtree collapses and expands interaction, <code class="codespan">default true</code>. As the drawing area is limited, and usually the nodes of a tree may be more, so there will be hidden between the nodes. In order to avoid this problem, you can put a temporary unrelated subtree folded away, until you need to start when necessary. Such as the above radial layout tree example, the center of the node is filled with blue is the folded away subtree, you can click to expand it.</p>\n<p><strong>Note: If you configure a custom image as the tag for a node, it is not possible to distinguish whether the current node has a collapsed subtree by the fill color. And currently do not support, upload two pictures, respectively represent the collapsing and expansion state of the node. So, if you want to explicitly show the two states of the node, it is recommended to use <code class="codespan">ECharts</code> regular tag types, such as <code class="codespan">emptyCircle</code>.</strong></p>\n',
    )
    initialTreeDepth: Optional[float] = Field(
        2,
        description='\n\n<p>The initial level (depth) of the tree. The root node is the 0th layer, then the first layer, the second layer, ... , until the leaf node. This configuration item is primarily used in conjunction with <code class="codespan">collapsing and expansion</code> interactions. The purpose is to prevent the nodes from obscuring each other. If set as -1 or <code class="codespan">null</code> or <code class="codespan">undefined</code>, all nodes are expanded.</p>\n',
    )
    itemStyle: Optional[ItemStyle132] = Field(
        None,
        description='<p>The style of each node in the tree, where <a href="#series-tree.itemStyle.color">itemStyle.color</a> represents the fill color of the node, to distinguish the state of the subtree corresponding to <code class="codespan">collapsing</code> or <code class="codespan">expansion</code>.</p>\n',
    )
    label: Optional[Label185] = Field(
        None,
        description='<p><code class="codespan">label</code> describes the style of the text corresponding to each node.</p>\n',
    )
    labelLayout: Optional[LabelLayout6] = Field(
        None,
        description='<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',
    )
    lineStyle: Optional[LineStyle145] = Field(
        None, description='<p>Defines the style of the tree edge.</p>\n'
    )
    emphasis: Optional[Emphasis63] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur49] = Field(
        None,
        description='<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-tree.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select14] = Field(
        None,
        description='<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-tree.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    leaves: Optional[Leaves] = Field(
        None,
        description='<p>Leaf node special configuration, such as the above tree diagram example, the leaf node and non-leaf node label location is different.</p>\n',
    )
    data: Optional[Data11] = Field(
        None,
        description='<p><a href="#series-tree.data">series-tree.data</a> the data format is a tree structure, for example：</p>\n<pre><code class="lang-javascript">{ // note that the outermost layer is an object that represents the root node of the tree.\n    name: &quot;flare&quot;,    // the name of the node, the text corresponding to the current node label.\n    label: {          // the special label configuration (if necessary).\n        ...           // the format of the label is shown in the series-tree.label.\n    },\n    itemStyle: {      // the special itemStyle configuration (if necessary).\n        ...           // the format of the itemstyle is shown in the series-tree.itemStyle.\n    },\n    children: [\n        {\n            name: &quot;flex&quot;,\n            value: 4116,    // value, which only displayed in tooltip.\n            label: {\n                ...\n            },\n            itemStyle: {\n                ...\n            },\n            collapsed: null, // If set as `true`, the node is collapsed in the initialization.\n            children: [...]  // leaf nodes do not have children, can not write.\n        },\n        ...\n    ]\n};\n</code></pre>\n',
    )
    tooltip: Optional[Tooltip18] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName220(_StyleName3):
    pass


class Rich220(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName220] = Field(
        None, alias='<style_name>', description=''
    )


class Label197(BaseModel):
    """
        <p><code class="codespan">label</code> decribes the style of the label in each node.</p>
    <blockquote>
    <p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>
    </ul>
    </blockquote>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        5,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich220] = Field(
        None,
        description='<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',
    )


class _StyleName221(_StyleName3):
    pass


class Rich221(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName221] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel(BaseModel):
    """
        <p><code class="codespan">upperLabel</code> is used to specify whether show label when the node has children. When <a href="#series-treemap.upperLabel.show">upperLabel.show</a> is set as <code class="codespan">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>
    <p>The same as <a href="#series-treemap.label">series-treemap.label</a>, the option <code class="codespan">upperLabel</code> can be placed at the root of <a href="#series-treemap">series-treemap</a> directly, or in <a href="#series-treemap.level">series-treemap.level</a>, or in each item of <a href="#series-treemap.data">series-treemap.data</a>.</p>
    <p>Specifically, <a href="#series-treemap.label">series-treemap.label</a> specifies the style when a node is a leaf, while <code class="codespan">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>
    <p>See:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=treemap-show-parent&edit=1&reset=1" width="700" height="500"></iframe>




    <blockquote>
    <p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>
    </ul>
    </blockquote>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        20, description='\n\n<p>Height of label area.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich221] = Field(
        None,
        description='<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',
    )


class Decal9(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle144(BaseModel):
    """
        <blockquote>
    <p>Tps: In treemap, <code class="codespan">itemStyle</code> attribute could appear in more than one places:</p>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>
    </ul>
    </blockquote>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>The color of a node. It use global palette <a href="#color">option.color</a> by default.</p>\n',
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0, description='\n\n<p>Border radius.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>The border width of a node. There is no border when it is set as <code class="codespan">0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href="#series-treemap.levels.gapWidth">gapWidth</a></p>\n',
    )
    gapWidth: Optional[float] = Field(
        0, description='\n\n<p>Gaps between child nodes.</p>\n'
    )
    borderColor: Optional[Any] = Field(
        "#fff',", description='\n\n<p>The border color and gap color of a node.</p>\n'
    )
    borderColorSaturation: Optional[Any] = Field(
        None,
        description='\n\n<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code class="codespan">borderColorSaturation</code> is set, the <code class="codespan">borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code class="codespan">borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1" target="_blank">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class="codespan">borderColorSaturation</code> to lift the saturation.</p>\n',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal9] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class _StyleName222(_StyleName3):
    pass


class Rich222(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName222] = Field(
        None, alias='<style_name>', description=''
    )


class Label198(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich222] = Field(
        None,
        description='<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',
    )


class LineStyle156(LineStyle51):
    pass


class LabelLine37(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle156] = Field(None, description='')


class _StyleName223(_StyleName3):
    pass


class Rich223(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName223] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel1(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich223] = Field(
        None,
        description='<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',
    )


class ItemStyle145(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>The color of a node. It use global palette <a href="#color">option.color</a> by default.</p>\n',
    )


class Emphasis66(BaseModel):
    """
    <p>Emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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<ul>\n<li><code class="codespan">&#39;ancestor&#39;</code> Focus on all ancestor nodes.</li>\n<li><code class="codespan">&#39;descendant&#39;</code> Focus on all descendants nodes.</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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label198] = Field(None, description='')
    labelLine: Optional[LabelLine37] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    upperLabel: Optional[UpperLabel1] = Field(None, description='')
    itemStyle: Optional[ItemStyle145] = Field(None, description='')


class _StyleName224(_StyleName3):
    pass


class Rich224(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName224] = Field(
        None, alias='<style_name>', description=''
    )


class Label199(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich224] = Field(
        None,
        description='<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',
    )


class LineStyle157(LineStyle51):
    pass


class LabelLine38(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle157] = Field(None, description='')


class _StyleName225(_StyleName3):
    pass


class Rich225(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName225] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel2(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich225] = Field(
        None,
        description='<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',
    )


class ItemStyle146(ItemStyle145):
    pass


class Blur52(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state.</p>

    """

    label: Optional[Label199] = Field(None, description='')
    labelLine: Optional[LabelLine38] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    upperLabel: Optional[UpperLabel2] = Field(None, description='')
    itemStyle: Optional[ItemStyle146] = Field(None, description='')


class _StyleName226(_StyleName3):
    pass


class Rich226(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName226] = Field(
        None, alias='<style_name>', description=''
    )


class Label200(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich226] = Field(
        None,
        description='<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',
    )


class LineStyle158(LineStyle51):
    pass


class LabelLine39(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle158] = Field(None, description='')


class _StyleName227(_StyleName3):
    pass


class Rich227(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName227] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel3(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich227] = Field(
        None,
        description='<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',
    )


class ItemStyle147(ItemStyle145):
    pass


class Select17(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label200] = Field(None, description='')
    labelLine: Optional[LabelLine39] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    upperLabel: Optional[UpperLabel3] = Field(None, description='')
    itemStyle: Optional[ItemStyle147] = Field(None, description='')


class _StyleName228(_StyleName):
    pass


class Rich228(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName228] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle31(BaseModel):
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich228] = Field(
        None,
        description='<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',
    )


class ItemStyle148(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Any] = Field(
        'rgba(0,0,0,0.7)',
        description='\n\n<p>breadcrumb 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',
    )
    borderColor: Optional[Any] = Field(
        'rgba(255,255,255,0.7)',
        description='\n\n<p>breadcrumb border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\n\n<p>breadcrumb border width. No border when it is set to be 0.</p>\n<p>breadcrumb border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>breadcrumb 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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        3,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'rgba(150,150,150,1)',
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    textStyle: Optional[TextStyle31] = Field(None, description='')


class _StyleName229(_StyleName):
    pass


class Rich229(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName229] = Field(
        None, alias='<style_name>', description=''
    )


class TextStyle32(BaseModel):
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich229] = Field(
        None,
        description='<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',
    )


class ItemStyle149(BaseModel):
    color: Optional[Any] = Field(
        'rgba(0,0,0,0.7)',
        description='\n\n<p>breadcrumb color. Since 5.2.0, it can be 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',
    )
    borderColor: Optional[Any] = Field(
        'rgba(255,255,255,0.7)',
        description='\n\n<p>breadcrumb border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\n\n<p>breadcrumb border width. No border when it is set to be 0.</p>\n<p>breadcrumb border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>breadcrumb 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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        3,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'rgba(150,150,150,1)',
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    textStyle: Optional[TextStyle32] = Field(None, description='')


class Emphasis67(BaseModel):
    itemStyle: Optional[ItemStyle149] = Field(None, description='')


class Breadcrumb(BaseModel):
    """
    <p>breadcrumb, showing the path of the current node.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the breadcrumb.</p>\n'
    )
    left: Optional[Union[str, float]] = Field(
        'center',
        description='<p>Distance between asdf  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between asdf  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between asdf  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        0,
        description='<p>Distance between asdf  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    height: Optional[float] = Field(
        22, description='\n\n<p>The height of breadcrumb.</p>\n'
    )
    emptyItemWidth: Optional[float] = Field(
        25,
        description='\n\n<p>When is no content in breadcrumb, this minimal width need to be set up.</p>\n',
    )
    itemStyle: Optional[ItemStyle148] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    emphasis: Optional[Emphasis67] = Field(None, description='')


class LineStyle159(LineStyle51):
    pass


class LabelLine40(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle159] = Field(None, description='')


class LabelLayout7(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class _StyleName230(_StyleName3):
    pass


class Rich230(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName230] = Field(
        None, alias='<style_name>', description=''
    )


class Label201(BaseModel):
    """
        <p><code class="codespan">label</code> decribes the style of the label in each node.</p>
    <blockquote>
    <p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>
    </ul>
    </blockquote>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        5,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich230] = Field(
        None,
        description='<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',
    )


class _StyleName231(_StyleName3):
    pass


class Rich231(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName231] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel4(BaseModel):
    """
        <p><code class="codespan">upperLabel</code> is used to specify whether show label when the node has children. When <a href="#series-treemap.upperLabel.show">upperLabel.show</a> is set as <code class="codespan">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>
    <p>The same as <a href="#series-treemap.label">series-treemap.label</a>, the option <code class="codespan">upperLabel</code> can be placed at the root of <a href="#series-treemap">series-treemap</a> directly, or in <a href="#series-treemap.level">series-treemap.level</a>, or in each item of <a href="#series-treemap.data">series-treemap.data</a>.</p>
    <p>Specifically, <a href="#series-treemap.label">series-treemap.label</a> specifies the style when a node is a leaf, while <code class="codespan">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>
    <p>See:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=treemap-show-parent&edit=1&reset=1" width="700" height="500"></iframe>




    <blockquote>
    <p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>
    </ul>
    </blockquote>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        20, description='\n\n<p>Height of label area.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich231] = Field(
        None,
        description='<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',
    )


class Decal10(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle150(BaseModel):
    """
        <blockquote>
    <p>Tps: In treemap, <code class="codespan">itemStyle</code> attribute could appear in more than one places:</p>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>
    </ul>
    </blockquote>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>The color of a node. It use global palette <a href="#color">option.color</a> by default.</p>\n',
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0, description='\n\n<p>Border radius.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>The border width of a node. There is no border when it is set as <code class="codespan">0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href="#series-treemap.levels.gapWidth">gapWidth</a></p>\n',
    )
    gapWidth: Optional[float] = Field(
        0, description='\n\n<p>Gaps between child nodes.</p>\n'
    )
    borderColor: Optional[Any] = Field(
        "#fff',", description='\n\n<p>The border color and gap color of a node.</p>\n'
    )
    borderColorSaturation: Optional[Any] = Field(
        None,
        description='\n\n<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code class="codespan">borderColorSaturation</code> is set, the <code class="codespan">borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code class="codespan">borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1" target="_blank">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class="codespan">borderColorSaturation</code> to lift the saturation.</p>\n',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal10] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class _StyleName232(_StyleName3):
    pass


class Rich232(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName232] = Field(
        None, alias='<style_name>', description=''
    )


class Label202(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich232] = Field(
        None,
        description='<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',
    )


class LineStyle160(LineStyle51):
    pass


class LabelLine41(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle160] = Field(None, description='')


class _StyleName233(_StyleName3):
    pass


class Rich233(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName233] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel5(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich233] = Field(
        None,
        description='<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',
    )


class ItemStyle151(ItemStyle145):
    pass


class Emphasis68(BaseModel):
    """
    <p>Emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label202] = Field(None, description='')
    labelLine: Optional[LabelLine41] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    upperLabel: Optional[UpperLabel5] = Field(None, description='')
    itemStyle: Optional[ItemStyle151] = Field(None, description='')


class _StyleName234(_StyleName3):
    pass


class Rich234(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName234] = Field(
        None, alias='<style_name>', description=''
    )


class Label203(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich234] = Field(
        None,
        description='<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',
    )


class LineStyle161(LineStyle51):
    pass


class LabelLine42(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle161] = Field(None, description='')


class _StyleName235(_StyleName3):
    pass


class Rich235(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName235] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel6(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich235] = Field(
        None,
        description='<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',
    )


class ItemStyle152(ItemStyle145):
    pass


class Blur53(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state.</p>

    """

    label: Optional[Label203] = Field(None, description='')
    labelLine: Optional[LabelLine42] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    upperLabel: Optional[UpperLabel6] = Field(None, description='')
    itemStyle: Optional[ItemStyle152] = Field(None, description='')


class _StyleName236(_StyleName3):
    pass


class Rich236(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName236] = Field(
        None, alias='<style_name>', description=''
    )


class Label204(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich236] = Field(
        None,
        description='<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',
    )


class LineStyle162(LineStyle51):
    pass


class LabelLine43(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle162] = Field(None, description='')


class _StyleName237(_StyleName3):
    pass


class Rich237(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName237] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel7(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich237] = Field(
        None,
        description='<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',
    )


class ItemStyle153(ItemStyle145):
    pass


class Select18(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label204] = Field(None, description='')
    labelLine: Optional[LabelLine43] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    upperLabel: Optional[UpperLabel7] = Field(None, description='')
    itemStyle: Optional[ItemStyle153] = Field(None, description='')


class Level(BaseModel):
    visualDimension: Optional[float] = Field(
        0,
        description='<p><code class="codespan">treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href="#series-treemap.data">series-treemap.data</a> can be an array. And each item of the array represents a &quot;dimension&quot;. <code class="codespan">visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">visualDimension</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    visualMin: Optional[float] = Field(
        None,
        description='\n\n<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href="#series-treemap.levels.colorMappingBy">colorMappingBy</a> is set to <code class="codespan">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class="codespan">visualMin</code> or <code class="codespan">visualMax</code>.</p>\n',
    )
    visualMax: Optional[float] = Field(
        None,
        description='\n\n<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href="#series-treemap.levels.colorMappingBy">colorMappingBy</a> is set to <code class="codespan">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class="codespan">visualMin</code> or <code class="codespan">visualMax</code>.</p>\n',
    )
    color: Optional[Any] = Field(
        None,
        description='<p>A color list for a level. Each node in the level will obtain a color from the color list (the rule see <a href="#series-treemap.levels.colorMappingBy">colorMappingBy</a>). It is empty by default, which means the global color list will be used.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">color</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    colorAlpha: Optional[Any] = Field(
        None,
        description='<p>It indicates the range of tranparent rate (color alpha) for nodes in a level</p>\n<p>.\nThe range of values is 0 ~ 1.</p>\n<p>For example, <code class="codespan">colorAlpha</code> can be <code class="codespan">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">colorAlpha</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    colorSaturation: Optional[float] = Field(
        None,
        description='<p>It indicates the range of saturation (color alpha) for nodes in a level.</p>\n<p>The range of values is 0 ~ 1.</p>\n<p>For example, <code class="codespan">colorSaturation</code> can be <code class="codespan">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">colorSaturation</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    colorMappingBy: Optional[str] = Field(
        'index',
        description='\n\n<p>Specify the rule according to which each node obtain color from <a href="#series-treemap.levels.color">color list</a>. Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;value&#39;</code>:</li>\n</ul>\n<p>Map <a href="#series-treemap.data.value">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href="#series-treemap.levels.visualDimension">visualDimension</a> can be used to specify which dimension of <a href="#series-treemap.data">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code class="codespan">&#39;index&#39;</code>:</li>\n</ul>\n<p>Map the <code class="codespan">index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href="#series-treemap.levels.color">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code class="codespan">&#39;id&#39;</code>:</li>\n</ul>\n<p>Map <a href="#series-treemap.data.id">series-treemap.data.id</a> to color.</p>\n<p>Since <code class="codespan">id</code> is used to identify node, if user call <code class="codespan">setOption</code> to modify the tree, each node will remain the original color before and after <code class="codespan">setOption</code> called. See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">colorMappingBy</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    visibleMin: Optional[float] = Field(
        10,
        description='\n\n<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">visibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    childrenVisibleMin: Optional[float] = Field(
        None,
        description='\n\n<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">childrenVisibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    label: Optional[Label201] = Field(
        None,
        description='<p><code class="codespan">label</code> decribes the style of the label in each node.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    upperLabel: Optional[UpperLabel4] = Field(
        None,
        description='<p><code class="codespan">upperLabel</code> is used to specify whether show label when the node has children. When <a href="#series-treemap.upperLabel.show">upperLabel.show</a> is set as <code class="codespan">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>\n<p>The same as <a href="#series-treemap.label">series-treemap.label</a>, the option <code class="codespan">upperLabel</code> can be placed at the root of <a href="#series-treemap">series-treemap</a> directly, or in <a href="#series-treemap.level">series-treemap.level</a>, or in each item of <a href="#series-treemap.data">series-treemap.data</a>.</p>\n<p>Specifically, <a href="#series-treemap.label">series-treemap.label</a> specifies the style when a node is a leaf, while <code class="codespan">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=treemap-show-parent&edit=1&reset=1" width="700" height="500"></iframe>\n\n\n\n\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    itemStyle: Optional[ItemStyle150] = Field(
        None,
        description='<blockquote>\n<p>Tps: In treemap, <code class="codespan">itemStyle</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    emphasis: Optional[Emphasis68] = Field(None, description='<p>Emphasis state.</p>\n')
    blur: Optional[Blur53] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state.</p>\n',
    )
    select: Optional[Select18] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state.</p>\n',
    )


class _StyleName238(_StyleName3):
    pass


class Rich238(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName238] = Field(
        None, alias='<style_name>', description=''
    )


class Label205(BaseModel):
    """
        <p><code class="codespan">label</code> decribes the style of the label in each node.</p>
    <blockquote>
    <p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>
    </ul>
    </blockquote>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        5,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich238] = Field(
        None,
        description='<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',
    )


class _StyleName239(_StyleName3):
    pass


class Rich239(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName239] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel8(BaseModel):
    """
        <p><code class="codespan">upperLabel</code> is used to specify whether show label when the node has children. When <a href="#series-treemap.upperLabel.show">upperLabel.show</a> is set as <code class="codespan">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>
    <p>The same as <a href="#series-treemap.label">series-treemap.label</a>, the option <code class="codespan">upperLabel</code> can be placed at the root of <a href="#series-treemap">series-treemap</a> directly, or in <a href="#series-treemap.level">series-treemap.level</a>, or in each item of <a href="#series-treemap.data">series-treemap.data</a>.</p>
    <p>Specifically, <a href="#series-treemap.label">series-treemap.label</a> specifies the style when a node is a leaf, while <code class="codespan">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>
    <p>See:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=treemap-show-parent&edit=1&reset=1" width="700" height="500"></iframe>




    <blockquote>
    <p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>
    </ul>
    </blockquote>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        20, description='\n\n<p>Height of label area.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich239] = Field(
        None,
        description='<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',
    )


class Decal11(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle154(BaseModel):
    """
        <blockquote>
    <p>Tps: In treemap, <code class="codespan">itemStyle</code> attribute could appear in more than one places:</p>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>
    </ul>
    </blockquote>
    <blockquote>
    <ul>
    <li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>
    </ul>
    </blockquote>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>The color of a node. It use global palette <a href="#color">option.color</a> by default.</p>\n',
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0, description='\n\n<p>Border radius.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>The border width of a node. There is no border when it is set as <code class="codespan">0</code>.</p>\n<p>Tip, gaps between child nodes are specified by <a href="#series-treemap.levels.gapWidth">gapWidth</a></p>\n',
    )
    gapWidth: Optional[float] = Field(
        0, description='\n\n<p>Gaps between child nodes.</p>\n'
    )
    borderColor: Optional[Any] = Field(
        "#fff',", description='\n\n<p>The border color and gap color of a node.</p>\n'
    )
    borderColorSaturation: Optional[Any] = Field(
        None,
        description='\n\n<p>The color saturation of a border or gap. The value range is between 0 ~ 1.</p>\n<p>Tips:</p>\n<p>When <code class="codespan">borderColorSaturation</code> is set, the <code class="codespan">borderColor</code> is disabled, and, instead, the final border color is calculated based on the color of this node (this color could be sepcified explicitly or inherited from its parent node) and mixing with <code class="codespan">borderColorSaturation</code>.</p>\n<p>In this way, a effect can be implemented: different sections have different hue of gap color repectively, which makes users easy to distinguish both sections and levels.</p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1" target="_blank">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class="codespan">borderColorSaturation</code> to lift the saturation.</p>\n',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal11] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class _StyleName240(_StyleName3):
    pass


class Rich240(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName240] = Field(
        None, alias='<style_name>', description=''
    )


class Label206(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich240] = Field(
        None,
        description='<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',
    )


class LineStyle163(LineStyle51):
    pass


class LabelLine44(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle163] = Field(None, description='')


class _StyleName241(_StyleName3):
    pass


class Rich241(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName241] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel9(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich241] = Field(
        None,
        description='<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',
    )


class ItemStyle155(ItemStyle145):
    pass


class Emphasis69(BaseModel):
    """
    <p>Emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label206] = Field(None, description='')
    labelLine: Optional[LabelLine44] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    upperLabel: Optional[UpperLabel9] = Field(None, description='')
    itemStyle: Optional[ItemStyle155] = Field(None, description='')


class _StyleName242(_StyleName3):
    pass


class Rich242(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName242] = Field(
        None, alias='<style_name>', description=''
    )


class Label207(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich242] = Field(
        None,
        description='<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',
    )


class LineStyle164(LineStyle51):
    pass


class LabelLine45(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle164] = Field(None, description='')


class _StyleName243(_StyleName3):
    pass


class Rich243(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName243] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel10(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich243] = Field(
        None,
        description='<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',
    )


class ItemStyle156(ItemStyle145):
    pass


class Blur54(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state.</p>

    """

    label: Optional[Label207] = Field(None, description='')
    labelLine: Optional[LabelLine45] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    upperLabel: Optional[UpperLabel10] = Field(None, description='')
    itemStyle: Optional[ItemStyle156] = Field(None, description='')


class _StyleName244(_StyleName3):
    pass


class Rich244(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName244] = Field(
        None, alias='<style_name>', description=''
    )


class Label208(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich244] = Field(
        None,
        description='<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',
    )


class LineStyle165(LineStyle51):
    pass


class LabelLine46(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle165] = Field(None, description='')


class _StyleName245(_StyleName3):
    pass


class Rich245(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName245] = Field(
        None, alias='<style_name>', description=''
    )


class UpperLabel11(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich245] = Field(
        None,
        description='<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',
    )


class ItemStyle157(ItemStyle145):
    pass


class Select19(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label208] = Field(None, description='')
    labelLine: Optional[LabelLine46] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    upperLabel: Optional[UpperLabel11] = Field(None, description='')
    itemStyle: Optional[ItemStyle157] = Field(None, description='')


class TextStyle33(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip19(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle33] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum19(BaseModel):
    value: Optional[Union[float, Any]] = Field(
        None,
        description='<p>The value of this node, indicating the area size.</p>\n<p>It could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.</p>\n<p>The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.</p>\n',
    )
    id: Optional[str] = Field(
        None,
        description='<p><code class="codespan">id</code> is not mandatory.\nBut if using API, id is used to locate node.</p>\n',
    )
    name: Optional[str] = Field(
        None, description='<p>Show the description text in rectangle.</p>\n'
    )
    visualDimension: Optional[float] = Field(
        0,
        description='<p><code class="codespan">treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href="#series-treemap.data">series-treemap.data</a> can be an array. And each item of the array represents a &quot;dimension&quot;. <code class="codespan">visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">visualDimension</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    visualMin: Optional[float] = Field(
        None,
        description='\n\n<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href="#series-treemap.levels.colorMappingBy">colorMappingBy</a> is set to <code class="codespan">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class="codespan">visualMin</code> or <code class="codespan">visualMax</code>.</p>\n',
    )
    visualMax: Optional[float] = Field(
        None,
        description='\n\n<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href="#series-treemap.levels.colorMappingBy">colorMappingBy</a> is set to <code class="codespan">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class="codespan">visualMin</code> or <code class="codespan">visualMax</code>.</p>\n',
    )
    color: Optional[Any] = Field(
        None,
        description='<p>A color list for a level. Each node in the level will obtain a color from the color list (the rule see <a href="#series-treemap.levels.colorMappingBy">colorMappingBy</a>). It is empty by default, which means the global color list will be used.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">color</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    colorAlpha: Optional[Any] = Field(
        None,
        description='<p>It indicates the range of tranparent rate (color alpha) for nodes in a level</p>\n<p>.\nThe range of values is 0 ~ 1.</p>\n<p>For example, <code class="codespan">colorAlpha</code> can be <code class="codespan">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">colorAlpha</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    colorSaturation: Optional[float] = Field(
        None,
        description='<p>It indicates the range of saturation (color alpha) for nodes in a level.</p>\n<p>The range of values is 0 ~ 1.</p>\n<p>For example, <code class="codespan">colorSaturation</code> can be <code class="codespan">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">colorSaturation</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    colorMappingBy: Optional[str] = Field(
        'index',
        description='\n\n<p>Specify the rule according to which each node obtain color from <a href="#series-treemap.levels.color">color list</a>. Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;value&#39;</code>:</li>\n</ul>\n<p>Map <a href="#series-treemap.data.value">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href="#series-treemap.levels.visualDimension">visualDimension</a> can be used to specify which dimension of <a href="#series-treemap.data">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code class="codespan">&#39;index&#39;</code>:</li>\n</ul>\n<p>Map the <code class="codespan">index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href="#series-treemap.levels.color">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code class="codespan">&#39;id&#39;</code>:</li>\n</ul>\n<p>Map <a href="#series-treemap.data.id">series-treemap.data.id</a> to color.</p>\n<p>Since <code class="codespan">id</code> is used to identify node, if user call <code class="codespan">setOption</code> to modify the tree, each node will remain the original color before and after <code class="codespan">setOption</code> called. See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">colorMappingBy</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    visibleMin: Optional[float] = Field(
        10,
        description='\n\n<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">visibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    childrenVisibleMin: Optional[float] = Field(
        None,
        description='\n\n<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">childrenVisibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    label: Optional[Label205] = Field(
        None,
        description='<p><code class="codespan">label</code> decribes the style of the label in each node.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    upperLabel: Optional[UpperLabel8] = Field(
        None,
        description='<p><code class="codespan">upperLabel</code> is used to specify whether show label when the node has children. When <a href="#series-treemap.upperLabel.show">upperLabel.show</a> is set as <code class="codespan">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>\n<p>The same as <a href="#series-treemap.label">series-treemap.label</a>, the option <code class="codespan">upperLabel</code> can be placed at the root of <a href="#series-treemap">series-treemap</a> directly, or in <a href="#series-treemap.level">series-treemap.level</a>, or in each item of <a href="#series-treemap.data">series-treemap.data</a>.</p>\n<p>Specifically, <a href="#series-treemap.label">series-treemap.label</a> specifies the style when a node is a leaf, while <code class="codespan">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=treemap-show-parent&edit=1&reset=1" width="700" height="500"></iframe>\n\n\n\n\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    itemStyle: Optional[ItemStyle154] = Field(
        None,
        description='<blockquote>\n<p>Tps: In treemap, <code class="codespan">itemStyle</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    emphasis: Optional[Emphasis69] = Field(None, description='<p>Emphasis state.</p>\n')
    blur: Optional[Blur54] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state.</p>\n',
    )
    select: Optional[Select19] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state.</p>\n',
    )
    link: Optional[str] = Field(
        None,
        description='<p>Enable hyperlink jump when clicking on node. It is avaliable when <a href="#series-treemap.nodeClick">series-treemap.nodeClick</a> is <code class="codespan">&#39;link&#39;</code>.</p>\n<p>See <a href="#series-treemap.data.target">series-treemap.data.target</a>.</p>\n',
    )
    target: Optional[str] = Field(
        'blank',
        description='<p>The same meaning as <code class="codespan">target</code> in <code class="codespan">html</code> <code class="codespan">&lt;a&gt;</code> label, See <a href="#series-treemap.data.link">series-treemap.data.link</a>. Option values are: <code class="codespan">&#39;blank&#39;</code> or <code class="codespan">&#39;self&#39;</code>.</p>\n',
    )
    children: Optional[Any] = Field(
        None,
        description='<p>child nodes, recursive definition, configurations are the same as <a href="#series-treemap.data">series-treemap.data</a>.</p>\n',
    )
    tooltip: Optional[Tooltip19] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class TextStyle34(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip20(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle34] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series8(BaseModel):
    """
        <p><a href="https://en.wikipedia.org/wiki/Treemapping" target="_blank">Treemap</a> is a common way to present &quot;hierarchical data&quot; or &quot;tree data&quot;. It primarily highlights the important nodes at all hierarchies in 『Tree』with area.</p>
    <p><strong>Example:</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=treemap-obama&edit=1&reset=1" width="700" height="580"></iframe>




    <p><strong>Visual Mapping:</strong></p>
    <p>treemap maps the numerical values to area.</p>
    <p>Moreover, it is able to map some dimensions of data to other visual channel, like colors, lightness of colors and etc.</p>
    <p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>
    <p><strong>Drill Down:</strong></p>
    <p>The feature <code class="codespan">drill down</code> means: when clicking a tree node, this node will be set as root and its children will be shown. When <a href="#series-treemap.leafDepth">leafDepth</a> is set, this feature is enabled.</p>
    <p><strong>An example about drill down:</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=treemap-drill-down&edit=1&reset=1" width="800" height="500"></iframe>



    <p>Notice: There are some difference in treemap configuration between ECharts3 and ECharts2. Some immature configuration ways are no longer supported:</p>
    <ul>
    <li><p>The position method using <code class="codespan">center/size</code> is no longer supported, and <code class="codespan">left/top/bottom/right/width/height</code> are used to position treemap, as other components do.</p>
    </li>
    <li><p>The configuration item <code class="codespan">breadcrumb</code> is moved outside <code class="codespan">itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code class="codespan">itemStyle</code> now.</p>
    </li>
    <li><p>The configuration item <code class="codespan">root</code> is not avaliable temporarily.User can zoom treemap to see some tiny or deep descendants, or using <a href="#series-treemap.leafDepth">leafDepth</a> to enable the feature of &quot;drill down&quot;.</p>
    </li>
    <li><p>The configuration item <code class="codespan">label</code> is moved outside the <code class="codespan">itemStyle/itemStyle.emphasis</code>, and it is in the same level with <code class="codespan">itemStyle</code> now.</p>
    </li>
    <li><p>The configuration items <code class="codespan">itemStyle.childBorderWidth</code> and <code class="codespan">itemStyle.childBorderColor</code> are not supported anymore (because in this way only 2 levels can be defined). <a href="#series-treemap.levels">series-treemap.levels</a> is used to define all levels now.</p>
    </li>
    </ul>

    """

    type: Optional[str] = Field('treemap', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        'center',
        description='<p>Distance between treemap  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'middle',
        description='<p>Distance between treemap  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between treemap  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between treemap  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        '80%', description='<p>Width of treemap  component. </p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        '80%', description='<p>Height of treemap  component. </p>\n'
    )
    squareRatio: Optional[float] = Field(
        None,
        description='\n\n<p>The expected square ratio. Layout would approach the ratio as close as possible.</p>\n<p>It defaults to be the golden ratio: <code class="codespan">0.5 * (1 + Math.sqrt(5))</code>.</p>\n',
    )
    leafDepth: Optional[float] = Field(
        None,
        description='\n\n<p>When <code class="codespan">leafDepth</code> is set, the feature &quot;drill down&quot; is enabled, which means when clicking a tree node, this node will be set as root and its children will be shown.</p>\n<p><code class="codespan">leafDepth</code> represents how many levels are shown at most. For example, when <code class="codespan">leafDepth</code> is set to <code class="codespan">1</code>, only one level will be shown.</p>\n<p><code class="codespan">leafDepth</code> is <code class="codespan">null</code>/<code class="codespan">undefined</code> by default, which means that &quot;drill down&quot; is disabled.</p>\n<p><strong>An example about drill down:</strong></p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=treemap-drill-down&edit=1&reset=1" width="800" height="500"></iframe>\n\n',
    )
    drillDownIcon: Optional[str] = Field(
        '▶', description='<p>Marker when the node is able to be drilled down.</p>\n'
    )
    roam: Optional[Union[bool, str]] = Field(
        True,
        description='<p>Whether to enable dragging roam (move and zoom). Optional values are:</p>\n<ul>\n<li><code class="codespan">false</code>: roam is disabled.</li>\n<li><code class="codespan">&#39;scale&#39;</code> or <code class="codespan">&#39;zoom&#39;</code>: zoom only.</li>\n<li><code class="codespan">&#39;move&#39;</code> or <code class="codespan">&#39;pan&#39;</code>: move (translation) only.</li>\n<li><code class="codespan">true</code>: both zoom and move (translation) are avaliable.</li>\n</ul>\n',
    )
    nodeClick: Optional[Union[bool, str]] = Field(
        'zoomToNode',
        description='<p>The behaviour when clicking a node. Optional values are:</p>\n<ul>\n<li><code class="codespan">false</code>: Do nothing after clicked.</li>\n<li><code class="codespan">&#39;zoomToNode&#39;</code>: Zoom to clicked node.</li>\n<li><code class="codespan">&#39;link&#39;</code>: If there is <a href="#series-treemap.data.link">link</a> in node data, do hyperlink jump after clicked.</li>\n</ul>\n',
    )
    zoomToNodeRatio: Optional[float] = Field(
        '0.32*0.32',
        description='\n\n<p>The treemap will be auto zoomed to a appropriate ratio when a node is clicked (when <a href="#series-treemap.nodeClick">nodeClick</a> is set as <code class="codespan">&#39;zoomToNode&#39;</code> and no drill down happens). This configuration item indicates the ratio.</p>\n',
    )
    visualDimension: Optional[float] = Field(
        0,
        description='<p><code class="codespan">treemap</code> is able to map any dimensions of data to visual.</p>\n<p>The value of <a href="#series-treemap.data">series-treemap.data</a> can be an array. And each item of the array represents a &quot;dimension&quot;. <code class="codespan">visualDimension</code> specifies the dimension on which visual mapping will be performed.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">visualDimension</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    visualMin: Optional[float] = Field(
        None,
        description='\n\n<p>The minimal value of current level. Auto-statistics by default.</p>\n<p>When <a href="#series-treemap.levels.colorMappingBy">colorMappingBy</a> is set to <code class="codespan">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class="codespan">visualMin</code> or <code class="codespan">visualMax</code>.</p>\n',
    )
    visualMax: Optional[float] = Field(
        None,
        description='\n\n<p>The maximal value of current level. Auto-statistics by default.</p>\n<p>When <a href="#series-treemap.levels.colorMappingBy">colorMappingBy</a> is set to <code class="codespan">&#39;value&#39;</code>, you are able to specify extent manually for visual mapping by specifying <code class="codespan">visualMin</code> or <code class="codespan">visualMax</code>.</p>\n',
    )
    colorAlpha: Optional[Any] = Field(
        None,
        description='<p>It indicates the range of tranparent rate (color alpha) for nodes of the series</p>\n<p>.\nThe range of values is 0 ~ 1.</p>\n<p>For example, <code class="codespan">colorAlpha</code> can be <code class="codespan">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">colorAlpha</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    colorSaturation: Optional[float] = Field(
        None,
        description='<p>It indicates the range of saturation (color alpha) for nodes  of the series.</p>\n<p>The range of values is 0 ~ 1.</p>\n<p>For example, <code class="codespan">colorSaturation</code> can be <code class="codespan">[0.3, 1]</code>.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">colorSaturation</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    colorMappingBy: Optional[str] = Field(
        'index',
        description='\n\n<p>Specify the rule according to which each node obtain color from <a href="#series-treemap.levels.color">color list</a>. Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;value&#39;</code>:</li>\n</ul>\n<p>Map <a href="#series-treemap.data.value">series-treemap.data.value</a> to color.</p>\n<p>In this way, the color of each node indicate its value.</p>\n<p><a href="#series-treemap.levels.visualDimension">visualDimension</a> can be used to specify which dimension of <a href="#series-treemap.data">data</a> is used to perform visual mapping.</p>\n<ul>\n<li><code class="codespan">&#39;index&#39;</code>:</li>\n</ul>\n<p>Map the <code class="codespan">index</code> (ordinal number) of nodes to color. Namely, in a level, the first node is mapped to the first color of <a href="#series-treemap.levels.color">color list</a>, and the second node gets the second color.</p>\n<p>In this way, adjacent nodes are distinguished by color.</p>\n<ul>\n<li><code class="codespan">&#39;id&#39;</code>:</li>\n</ul>\n<p>Map <a href="#series-treemap.data.id">series-treemap.data.id</a> to color.</p>\n<p>Since <code class="codespan">id</code> is used to identify node, if user call <code class="codespan">setOption</code> to modify the tree, each node will remain the original color before and after <code class="codespan">setOption</code> called. See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">colorMappingBy</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    visibleMin: Optional[float] = Field(
        10,
        description='\n\n<p>A node will not be shown when its area size is smaller than this value (unit: px square).</p>\n<p>In this way, tiny nodes will be hidden, otherwise they will huddle together. When user zoom the treemap, the area size will increase and the rectangle will be shown if the area size is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">visibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    childrenVisibleMin: Optional[float] = Field(
        None,
        description='\n\n<p>Children will not be shown when area size of a node is smaller than this value (unit: px square).</p>\n<p>This can hide the details of nodes when the rectangular area is not large enough. When users zoom nodes, the child node would show if the area is larger than this threshold.</p>\n<p>About visual encoding, see details in <a href="#series-treemap.levels">series-treemap.levels</a>.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">childrenVisibleMin</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    label: Optional[Label197] = Field(
        None,
        description='<p><code class="codespan">label</code> decribes the style of the label in each node.</p>\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    upperLabel: Optional[UpperLabel] = Field(
        None,
        description='<p><code class="codespan">upperLabel</code> is used to specify whether show label when the node has children. When <a href="#series-treemap.upperLabel.show">upperLabel.show</a> is set as <code class="codespan">true</code>, the feature that &quot;show parent label&quot; is enabled.</p>\n<p>The same as <a href="#series-treemap.label">series-treemap.label</a>, the option <code class="codespan">upperLabel</code> can be placed at the root of <a href="#series-treemap">series-treemap</a> directly, or in <a href="#series-treemap.level">series-treemap.level</a>, or in each item of <a href="#series-treemap.data">series-treemap.data</a>.</p>\n<p>Specifically, <a href="#series-treemap.label">series-treemap.label</a> specifies the style when a node is a leaf, while <code class="codespan">upperLabel</code> specifies the style when a node has children, in which case the label is displayed in the inner top of the node.</p>\n<p>See:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=treemap-show-parent&edit=1&reset=1" width="700" height="500"></iframe>\n\n\n\n\n<blockquote>\n<p>Tps: In treemap, <code class="codespan">label</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    itemStyle: Optional[ItemStyle144] = Field(
        None,
        description='<blockquote>\n<p>Tps: In treemap, <code class="codespan">itemStyle</code> attribute could appear in more than one places:</p>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in <a href="#series-treemap">sereis-treemap</a>, indicating the unified setting of the series.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each array element of  <a href="#series-treemap.levels">series-treemap.levels</a>, indicating the unified setting of each level of the tree.</li>\n</ul>\n</blockquote>\n<blockquote>\n<ul>\n<li>It could appear in each node of <a href="#series-treemap.data">series-treemap.data</a>, indicating the particular setting of each node.</li>\n</ul>\n</blockquote>\n',
    )
    emphasis: Optional[Emphasis66] = Field(None, description='<p>Emphasis state.</p>\n')
    blur: Optional[Blur52] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state.</p>\n',
    )
    select: Optional[Select17] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    breadcrumb: Optional[Breadcrumb] = Field(
        None, description='<p>breadcrumb, showing the path of the current node.</p>\n'
    )
    labelLine: Optional[LabelLine40] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    labelLayout: Optional[LabelLayout7] = Field(
        None,
        description='<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',
    )
    levels: Optional[List[Level]] = Field(
        None,
        description='<p><strong>Multiple Levels Configuration</strong></p>\n<p>treemap adopts 4-level configuration:</p>\n<pre><code>&quot;each node&quot; --&gt; &quot;each level&quot; --&gt; &quot;each series&quot;.\n</code></pre><p>That is, we can configurate each node, can also configurate each level of the tree, or set overall configurations on each series. The highest priority is node configuration.</p>\n<p><code class="codespan">levels</code> is configurations on each levels, which is used most.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">// Notice that in fact the data structure is not &quot;tree&quot;, but is &quot;forest&quot;.\ndata: [\n    {\n        name: &#39;nodeA&#39;,\n        children: [\n            {name: &#39;nodeAA&#39;},\n            {name: &#39;nodeAB&#39;},\n        ]\n    },\n    {\n        name: &#39;nodeB&#39;,\n        children: [\n            {name: &#39;nodeBA&#39;}\n        ]\n    }\n],\nlevels: [\n    {...}, // configurations of the top level of the data structure &quot;forest&quot;\n        // (the level that contains &#39;nodeA&#39;, &#39;nodeB&#39; shown above).\n    {...}, // configurations of the next level\n        // (the level that contains &#39;nodeAA&#39;, &#39;nodeAB&#39;, &#39;nodeBA&#39; shown above)\n    {...}, // configurations of the next level\n    ...\n]\n</code></pre>\n<p><strong>The Rules about Visual Mapping</strong></p>\n<p>When designing a treemap, we primarily focus on how to visually distinguish &quot;different levels&quot;, &quot;different categories in the same level&quot;, which requires appropriate settings of &quot;rectangular color&quot;, &quot;border thickness&quot;, &quot;border color&quot; and even &quot;color saturation of rectangular&quot; and so on on each level.</p>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=treemap-disk&amp;edit=1&amp;reset=1" target="_blank">example</a>. The top level is divided into several parts by colors &quot;red&quot;, &quot;green&quot;, &quot;blue&quot;, and etc ... In each color block, <code class="codespan">colorSaturation</code> is used to distinguish nodes in sublevel. The border color of the top level is &quot;white&quot;, while the border color of the sublevel is the color that based on the current block color and processed by <code class="codespan">borderColorSaturation</code>.</p>\n<p><code class="codespan">treemap</code> uses this rule of visual configuration: each level computes its visual value based on the configurations (<code class="codespan">color</code>, <code class="codespan">colorSaturation</code>, <code class="codespan">borderColor</code>, <code class="codespan">borderColorSaturation</code>) on this level. If there is no certain configuration in a node, it inherits the configuration from its parent.</p>\n<p>In this way, this effect can be configured: set a <code class="codespan">color</code> list on the parent level, and set <code class="codespan">colorSaturation</code> on the child level, and then each node in the parent level would obtain a color from the <code class="codespan">color</code> list, and each node in the child level would obtain a value from <code class="codespan">colorSaturation</code> and compound it with the color inherited from its parent node to get its final color.</p>\n<p><strong>Dimensions and &quot;Extra Visual Mapping&quot;</strong></p>\n<p>See the example below: every <code class="codespan">value</code> field is set as an Array, in which each item in the array represents a dimension respectively.</p>\n<pre><code class="lang-javascript">[\n    {\n        value: [434, 6969, 8382],\n        children: [\n            {\n                value: [1212, 4943, 5453],\n                id: &#39;someid-1&#39;,\n                name: &#39;description of this node&#39;,\n                children: [...]\n            },\n            {\n                value: [4545, 192, 439],\n                id: &#39;someid-2&#39;,\n                name: &#39;description of this node&#39;,\n                children: [...]\n            },\n            ...\n        ]\n    },\n    {\n        value: [23, 59, 12],\n        children: [...]\n    },\n    ...\n]\n</code></pre>\n<p><code class="codespan">treemap</code> will map the first dimension (the first item of the array) to &quot;area&quot;. If we want to express more information, we could map another dimension (specified by <a href="#series-treemap.viusalDimension">series-treemap.visualDimension</a>) to another visual types, such as <code class="codespan">colorSaturation</code> and so on. See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=treemap-obama&amp;edit=1&amp;reset=1" target="_blank">example</a> and select the legend &#39;Growth&#39;.</p>\n<p><strong>How to avoid confusion by setting border/gap of node</strong></p>\n<p>If all of the border/gaps are set with the same color, confusion might occur when rectangulars in different levels display at the same time.</p>\n<p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/treemap-borderColor&amp;edit=1&amp;reset=1" target="_blank">example</a>. Notice that the child rectangles in the red area are in the deeper level than rectangles that are saparated by white gap. So in the red area, basically we set gap color with red, and use <code class="codespan">borderColorSaturation</code> to lift the saturation.</p>\n<p><strong>Explanation about borderWidth, gapWidth, borderColor</strong></p>\n<p><img width="500" height="auto" src="documents/asset/img/treemap-border-gap.png"></p>\n',
    )
    data: Optional[List[Datum19]] = Field(
        None,
        description='<p>the the data format of <a href="#series-treemap.data">series-treemap.data</a> is a forest. For example:</p>\n<pre><code class="lang-javascript">[ // Tips, the top level is an array.\n    {\n        value: 1212,\n        children: [\n            {\n                value: 2323,    // The value of this node, indicating the area size.\n                                // it could also be an array, such as [2323, 43, 55], in which the first item of array indicates the area size.\n                                // The other items of the array can be used for extra visual mapping. See details in series-treemp.levels.\n                id: &#39;someid-1&#39;, // id is not mandatory.\n                                // But if using API, id is used to locate node.\n                name: &#39;description of this node&#39;, // show the description text in rectangle.\n                children: [...],\n                label: {        // The label config of this node (if necessary).\n                    ...         // see series-treemap.label.\n                },\n                itemStyle: {    // the itemStyle of this node (if necessary).\n                    ...         // the see series-treemap.itemStyle.\n                }\n            },\n            {\n                value: 4545,\n                id: &#39;someid-2&#39;,\n                name: &#39;description of this node&#39;,\n                children: [\n                    {\n                        value: 5656,\n                        id: &#39;someid-3&#39;,\n                        name: &#39;description of this node&#39;,\n                        children: [...]\n                    },\n                    ...\n                ]\n            }\n        ]\n    },\n    {\n        value: [23, 59, 12]\n        // if there is no children, here could be nothing.\n    },\n    ...\n]\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1500,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'quinticInOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    tooltip: Optional[Tooltip20] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName246(_StyleName3):
    pass


class Rich246(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName246] = Field(
        None, alias='<style_name>', description=''
    )


class Label209(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich246] = Field(
        None,
        description='<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',
    )


class LineStyle166(LineStyle51):
    pass


class LabelLine47(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle166] = Field(None, description='')


class Decal12(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle158(BaseModel):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        'white',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        1,
        description='\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',
    )
    decal: Optional[Decal12] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )
    borderRadius: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.</p>\n<p>Since <code class="codespan">v5.3.0</code>, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.</p>\n<p>For example:</p>\n<p>Before <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the inner radius and the outer corner radius is <code class="codespan">50%</code> of the outer radius.</li>\n</ul>\n<p>Since <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the difference between the inner sector and the outer sector, and the outer corner radius is <code class="codespan">50%</code> of the difference.</li>\n<li><code class="codespan">borderRadius: [5, 10, 15, 20]</code>: means the two inner corner radii are <code class="codespan">5px</code> and <code class="codespan">10px</code>, and the two outer corner radii are <code class="codespan">15px</code> and <code class="codespan">20px</code>.</li>\n</ul>\n',
    )


class _StyleName247(_StyleName3):
    pass


class Rich247(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName247] = Field(
        None, alias='<style_name>', description=''
    )


class Label210(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich247] = Field(
        None,
        description='<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',
    )


class LineStyle167(LineStyle51):
    pass


class LabelLine48(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle167] = Field(None, description='')


class ItemStyle159(BaseModel):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. Since 5.2.0, it can be 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',
    )
    borderColor: Optional[Any] = Field(
        'white',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        1,
        description='\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',
    )
    borderRadius: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.</p>\n<p>Since <code class="codespan">v5.3.0</code>, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.</p>\n<p>For example:</p>\n<p>Before <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the inner radius and the outer corner radius is <code class="codespan">50%</code> of the outer radius.</li>\n</ul>\n<p>Since <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the difference between the inner sector and the outer sector, and the outer corner radius is <code class="codespan">50%</code> of the difference.</li>\n<li><code class="codespan">borderRadius: [5, 10, 15, 20]</code>: means the two inner corner radii are <code class="codespan">5px</code> and <code class="codespan">10px</code>, and the two outer corner radii are <code class="codespan">15px</code> and <code class="codespan">20px</code>.</li>\n</ul>\n',
    )


class Emphasis70(BaseModel):
    """
    <p>Emphasis state.</p>

    """

    label: Optional[Label210] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine48] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle159] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )


class _StyleName248(_StyleName3):
    pass


class Rich248(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName248] = Field(
        None, alias='<style_name>', description=''
    )


class Label211(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich248] = Field(
        None,
        description='<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',
    )


class LineStyle168(LineStyle51):
    pass


class LabelLine49(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle168] = Field(None, description='')


class ItemStyle160(BaseModel):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        'white',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        1,
        description='\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',
    )
    borderRadius: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.</p>\n<p>Since <code class="codespan">v5.3.0</code>, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.</p>\n<p>For example:</p>\n<p>Before <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the inner radius and the outer corner radius is <code class="codespan">50%</code> of the outer radius.</li>\n</ul>\n<p>Since <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the difference between the inner sector and the outer sector, and the outer corner radius is <code class="codespan">50%</code> of the difference.</li>\n<li><code class="codespan">borderRadius: [5, 10, 15, 20]</code>: means the two inner corner radii are <code class="codespan">5px</code> and <code class="codespan">10px</code>, and the two outer corner radii are <code class="codespan">15px</code> and <code class="codespan">20px</code>.</li>\n</ul>\n',
    )


class Blur55(BaseModel):
    """
    <p>Blur state.</p>

    """

    label: Optional[Label211] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine49] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle160] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )


class _StyleName249(_StyleName3):
    pass


class Rich249(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName249] = Field(
        None, alias='<style_name>', description=''
    )


class Label212(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich249] = Field(
        None,
        description='<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',
    )


class LineStyle169(LineStyle51):
    pass


class LabelLine50(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle169] = Field(None, description='')


class ItemStyle161(ItemStyle160):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    pass


class Select20(BaseModel):
    """
    <p>Select state.</p>

    """

    label: Optional[Label212] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine50] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle161] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )


class Datum20(BaseModel):
    value: Optional[float] = Field(
        None,
        description='<p>Value for each item. If contains children, value can be left unset, and sum of children values will be used in this case.</p>\n',
    )
    name: Optional[str] = Field(
        None, description='<p>Name displayed in each sector.</p>\n'
    )
    link: Optional[str] = Field(
        None,
        description='<p>Link address that redirects to when this sector is clicked. Only useful when <a href="#series-sunburst.nodeClick">series-sunburst.nodeClick</a> is set to be <code class="codespan">&#39;link&#39;</code>.</p>\n<p>See <a href="#series-sunburst.data.target">series-sunburst.data.target</a>.</p>\n',
    )
    target: Optional[str] = Field(
        'blank',
        description='<p>Like <code class="codespan">target</code> attribute of HTML <code class="codespan">&lt;a&gt;</code>, which can either be <code class="codespan">&#39;blank&#39;</code> or <code class="codespan">&#39;self&#39;</code>. See <a href="#series-sunburst.data.link">series-sunburst.data.link</a>.</p>\n',
    )
    label: Optional[Label209] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine47] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle158] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )
    emphasis: Optional[Emphasis70] = Field(None, description='<p>Emphasis state.</p>\n')
    blur: Optional[Blur55] = Field(None, description='<p>Blur state.</p>\n')
    select: Optional[Select20] = Field(None, description='<p>Select state.</p>\n')
    children: Optional[Any] = Field(
        None,
        description='<p>The children nodes defined recursively. The structure is the same as <a href="#series-sunburst.data">series-sunburst.data</a>.</p>\n',
    )


class _StyleName250(_StyleName3):
    pass


class Rich250(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName250] = Field(
        None, alias='<style_name>', description=''
    )


class Label213(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>If it is <code class="codespan">number</code> type, then is stands for rotation, from -90 degrees to 90 degrees, and positive values stand for counterclockwise.</p>\n<p>Besides, it can be string <code class="codespan">&#39;radial&#39;</code>, standing for radial rotation; or <code class="codespan">&#39;tangential&#39;</code>, standing for tangential rotation.</p>\n<p>By default, it is <code class="codespan">&#39;radial&#39;</code>. If no rotation is wanted, it can be set to <code class="codespan">0</code>.</p>\n<p>The following example shows different <code class="codespan">rotate</code> settings:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=sunburst-label-rotate&edit=1&reset=1" width="700" height="400"></iframe>\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/sunburst-label-align&edit=1&reset=1" width="700" height="400"></iframe>\n\n\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich250] = Field(
        None,
        description='<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',
    )


class LineStyle170(LineStyle51):
    pass


class LabelLine51(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle170] = Field(None, description='')


class LabelLayout8(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class Decal13(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle162(BaseModel):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        'white',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        1,
        description='\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',
    )
    decal: Optional[Decal13] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )
    borderRadius: Optional[Union[float, str, Any]] = Field(
        None,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>To specify the roundness for corners of the sectors of the sunburst chart. It can be either a specific pixel value or a percentage value relative to the radius of the sector.</p>\n<p>Since <code class="codespan">v5.3.0</code>, it is supported to configure the corner radius of the four corners respectively from the inside to the outside, clockwise. The relative target of the percentage value has been changed to be the difference between the inner radius and the outer radius.</p>\n<p>For example:</p>\n<p>Before <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the inner radius and the outer corner radius is <code class="codespan">50%</code> of the outer radius.</li>\n</ul>\n<p>Since <code class="codespan">v5.3.0</code>:</p>\n<ul>\n<li><code class="codespan">borderRadius: 10</code>: means that both inner corner radius and outer corner radius are <code class="codespan">10px</code>.</li>\n<li><code class="codespan">borderRadius: &#39;20%&#39;</code>: means that both inner corner radius is <code class="codespan">20%</code> of the inner radius and outer corner radius is <code class="codespan">20%</code> of the outer radius.</li>\n<li><code class="codespan">borderRadius: [10, 20]</code>: means that the inner corner radius is <code class="codespan">10px</code> and the outer corner radius is <code class="codespan">20px</code>.</li>\n<li><code class="codespan">borderRadius: [&#39;20%&#39;, &#39;50%&#39;]</code>: means that the inner corner radius is <code class="codespan">20%</code> of the difference between the inner sector and the outer sector, and the outer corner radius is <code class="codespan">50%</code> of the difference.</li>\n<li><code class="codespan">borderRadius: [5, 10, 15, 20]</code>: means the two inner corner radii are <code class="codespan">5px</code> and <code class="codespan">10px</code>, and the two outer corner radii are <code class="codespan">15px</code> and <code class="codespan">20px</code>.</li>\n</ul>\n',
    )


class _StyleName251(_StyleName3):
    pass


class Rich251(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName251] = Field(
        None, alias='<style_name>', description=''
    )


class Label214(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich251] = Field(
        None,
        description='<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',
    )


class LineStyle171(LineStyle51):
    pass


class LabelLine52(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle171] = Field(None, description='')


class ItemStyle163(ItemStyle159):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    pass


class Emphasis71(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    focus: Optional[str] = Field(
        'none',
        description='<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<ul>\n<li><code class="codespan">&#39;ancestor&#39;</code> Focus on all ancestor nodes.</li>\n<li><code class="codespan">&#39;descendant&#39;</code> Focus on all descendants nodes.</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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label214] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine52] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle163] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )


class _StyleName252(_StyleName3):
    pass


class Rich252(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName252] = Field(
        None, alias='<style_name>', description=''
    )


class Label215(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich252] = Field(
        None,
        description='<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',
    )


class LineStyle172(LineStyle51):
    pass


class LabelLine53(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle172] = Field(None, description='')


class ItemStyle164(ItemStyle160):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    pass


class Blur56(BaseModel):
    """
    <p>Configurations of blur state. Available when <a href="#series-sunburst.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    label: Optional[Label215] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine53] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle164] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )


class _StyleName253(_StyleName3):
    pass


class Rich253(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName253] = Field(
        None, alias='<style_name>', description=''
    )


class Label216(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich253] = Field(
        None,
        description='<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',
    )


class LineStyle173(LineStyle51):
    pass


class LabelLine54(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle173] = Field(None, description='')


class ItemStyle165(ItemStyle160):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    pass


class Select21(BaseModel):
    """
    <p>Configurations of select state. Available when <a href="#series-sunburst.selectedMode">selectedMode</a> is set.</p>

    """

    label: Optional[Label216] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine54] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle165] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )


class _StyleName254(_StyleName3):
    pass


class Rich254(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName254] = Field(
        None, alias='<style_name>', description=''
    )


class Label217(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich254] = Field(
        None,
        description='<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',
    )


class LineStyle174(LineStyle51):
    pass


class LabelLine55(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle174] = Field(None, description='')


class ItemStyle166(ItemStyle160):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    pass


class _StyleName255(_StyleName3):
    pass


class Rich255(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName255] = Field(
        None, alias='<style_name>', description=''
    )


class Label218(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich255] = Field(
        None,
        description='<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',
    )


class LineStyle175(LineStyle51):
    pass


class LabelLine56(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle175] = Field(None, description='')


class ItemStyle167(ItemStyle159):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    pass


class Emphasis72(BaseModel):
    """
    <p>Emphasis state.</p>

    """

    label: Optional[Label218] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine56] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle167] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )


class _StyleName256(_StyleName3):
    pass


class Rich256(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName256] = Field(
        None, alias='<style_name>', description=''
    )


class Label219(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich256] = Field(
        None,
        description='<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',
    )


class LineStyle176(LineStyle51):
    pass


class LabelLine57(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle176] = Field(None, description='')


class ItemStyle168(ItemStyle160):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    pass


class Blur57(BaseModel):
    """
    <p>Blur state.</p>

    """

    label: Optional[Label219] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine57] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle168] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )


class _StyleName257(_StyleName3):
    pass


class Rich257(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName257] = Field(
        None, alias='<style_name>', description=''
    )


class Label220(BaseModel):
    """
        <p>To specify the style of the label of the sector.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>
    <p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    rotate: Optional[Union[str, float]] = Field(
        'radial',
        description='\n\n\n<p>Same to <a href="#sunburst.label.rotate">label.rotate</a></p>\n',
    )
    align: Optional[str] = Field(
        'center',
        description='\n\n<p>Align of text, which can be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>. Note that <code class="codespan">&#39;left&#39;</code> stands for inner side, and <code class="codespan">&#39;right&#39;</code> stands for outer side.</p>\n<p>Same to <a href="#sunburst.label.align">label.align</a></p>\n',
    )
    minAngle: Optional[float] = Field(
        None,
        description='\n\n<p>If angle of data piece is smaller than this value (in degrees), then text is not displayed. This is used for hiding text for small piece of data.</p>\n',
    )
    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich257] = Field(
        None,
        description='<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',
    )


class LineStyle177(LineStyle51):
    pass


class LabelLine58(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle177] = Field(None, description='')


class ItemStyle169(ItemStyle160):
    """
        <p>To specify the style of the sector of the sunburst chart.</p>
    <p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>
    <p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>

    """

    pass


class Select22(BaseModel):
    """
    <p>Select state.</p>

    """

    label: Optional[Label220] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine58] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle169] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )


class Level1(BaseModel):
    radius: Optional[Any] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<p>The inner and outer radius of the current layer, noting that the radius of other layers will not be adaptive.</p>\n',
    )
    label: Optional[Label217] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine55] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle166] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )
    emphasis: Optional[Emphasis72] = Field(None, description='<p>Emphasis state.</p>\n')
    blur: Optional[Blur57] = Field(None, description='<p>Blur state.</p>\n')
    select: Optional[Select22] = Field(None, description='<p>Select state.</p>\n')


class Series9(BaseModel):
    """
        <p><a href="https://en.wikipedia.org/wiki/Pie_chart#Ring_chart,_sunburst_chart,_and_multilevel_pie_chart" target="_blank">Sunburst Chart</a> is composed of multiple pie charts. From the view of data structure, inner rings are the parent nodes of outer rings. Therefore, it can show the partial-overall relationship as <a href="#series-pie">Pie</a> charts, and also level relation as <a href="#series-treemap">Treemap</a> charts.</p>
    <p><strong>For example:</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=sunburst-monochrome&edit=1&reset=1" width="700" height="500"></iframe>


    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=sunburst-drink&edit=1&reset=1" width="700" height="700"></iframe>


    <p><strong>Data Drilling</strong></p>
    <p>The sunburst chart supports data drilling by default, which means when a user clicks a sector, it will be used as the root node, and there will be a circle in the center used to return to the parent node. If data drilling is not needed, it can be disabled by <a href="#series-sunburst.nodeClick">series-sunburst.nodeClick</a>.</p>

    """

    type: Optional[str] = Field('sunburst', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<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',
    )
    center: Optional[Any] = Field(
        "['50%', '50%']",
        description='\n\n<p>Center position of Sunburst chart, the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>',
    )
    radius: Optional[Union[float, str, Any]] = Field(
        "[0, '75%']",
        description='\n\n<p>Radius of Sunburst chart. Value can be:</p>\n<ul>\n<li><code class="codespan">number</code>: Specify outside radius directly.</li>\n<li><code class="codespan">string</code>: For example, <code class="codespan">&#39;20%&#39;</code>, means that the outside radius is 20% of the viewport size (the little one between width and height of the chart container).</li>\n</ul>\n<ul>\n<li><code class="codespan">Array.&lt;number|string&gt;</code>: The first item specifies the inside radius, and the second item specifies the outside radius. Each item follows the definitions above.</li>\n</ul>\n',
    )
    data: Optional[List[Datum20]] = Field(
        None,
        description='<p>The data structure of <a href="#series-sunburst.data">series-sunburst.data</a> is like tree. For example:</p>\n<pre><code class="lang-ts">[{\n    name: &#39;parent1&#39;,\n    value: 10,          // value of parent node can be left unset, and sum of\n                        // children values will be used in this case.\n                        // If is set, and is larger than sum of children nodes,\n                        // the reset can be used for other parts in parent.\n    children: [{\n        value: 5,\n        name: &#39;child1&#39;,\n        children: [{\n            value: 2,\n            name: &#39;grandchild1&#39;,\n            itemStyle: {\n                // every data can have its own itemStyle,\n                // which will overwrites series.itemStyle and level.itemStyle\n            },\n            label: {\n                // label style, the same to above\n            }\n        }]\n    }, {\n        value: 3,\n        name: &#39;child2&#39;\n    }],\n    itemStyle: {\n        // itemStyle of parent1, which will not be inherited for children\n    },\n    label: {\n        // label of parent1, which will not be inherited for children\n    }\n}, {\n    name: &#39;parent2&#39;,\n    value: 4\n}]\n</code></pre>\n',
    )
    nodeClick: Optional[Union[bool, str]] = Field(
        'rootToNode',
        description='\n\n<p>The action of clicking a sector, which can be:</p>\n<ul>\n<li><code class="codespan">false</code>: nothing happens.</li>\n<li><code class="codespan">&#39;rootToNode&#39;</code>: use the clicked sector as root.</li>\n<li><code class="codespan">&#39;link&#39;</code>：if <a href="#series-sunburst.data.link">link</a> is set, the page will redirect to it.</li>\n</ul>\n',
    )
    sort: Optional[Union[str, Any]] = Field(
        'desc',
        description='\n\n<p>Sorting method that sectors use based on <a href="#series-sunburst.data.value"><code class="codespan">value</code></a>, which is the sum of children when not set. The default value <code class="codespan">&#39;desc&#39;</code> states for descending order, while it can also be set to be <code class="codespan">&#39;asc&#39;</code> for ascending order, or <code class="codespan">null</code> for not sorting, or callback function like:</p>\n<pre><code class="lang-ts">function(nodeA, nodeB) {\n    return nodeA.getValue() - nodeB.getValue();\n}\n</code></pre>\n',
    )
    renderLabelForZeroData: Optional[bool] = Field(
        False,
        description='\n\n<p>If there is no <code class="codespan">name</code>, whether need to render it.</p>\n',
    )
    label: Optional[Label213] = Field(
        None,
        description='<p>To specify the style of the label of the sector.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.label">series.data.label</a> &gt; <a href="#series-sunburst.levels.label">series.levels.label</a> &gt; <a href="#series-sunburst.label">series.label</a>。</strong></p>\n<p>Text label of sunburst chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine51] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    labelLayout: Optional[LabelLayout8] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle162] = Field(
        None,
        description='<p>To specify the style of the sector of the sunburst chart.</p>\n<p>You can specify the style of all sectors with <a href="#series-sunburst.itemStyle">series.itemStyle</a>, or specify the style of each level of sectors with <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>, or specify a specific style for each sector with <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a>. The priority is from low to high, that is, if <a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> is defined, it will override <a href="#series-sunburst.itemStyle">series.itemStyle</a> and <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a>.</p>\n<p><strong>Priority：<a href="#series-sunburst.data.itemStyle">series.data.itemStyle</a> &gt; <a href="#series-sunburst.levels.itemStyle">series.levels.itemStyle</a> &gt; <a href="#series-sunburst.itemStyle">series.itemStyle</a>。</strong></p>\n',
    )
    emphasis: Optional[Emphasis71] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur56] = Field(
        None,
        description='<p>Configurations of blur state. Available when <a href="#series-sunburst.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select21] = Field(
        None,
        description='<p>Configurations of select state. Available when <a href="#series-sunburst.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    levels: Optional[List[Level1]] = Field(
        None,
        description='<p><strong>Multiple levels</strong></p>\n<p>Sunburst chart has a leveled structure. To make it convenient, we provide a <code class="codespan">levels</code> option, which is an array. The first element of it is for returning to parent node when data mining. The following elements are for levels from center to outside.</p>\n<p>For example, if we don&#39;t want the data mining, and want to set the most inside sector to be red, and text to be blue, we can set the option like:</p>\n<pre><code class="lang-ts">series: {\n    // ...\n    levels: [\n        {\n            // Blank setting for data mining\n        },\n        {\n            // The most inside level\n            itemStyle: {\n                color: &#39;red&#39;\n            },\n            label: {\n                color: &#39;blue&#39;\n            }\n        },\n        {\n            // The second level\n        }\n    ]\n}\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        500,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class Decal14(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle170(BaseModel):
    """
    <p>Style of boxplot.</p>

    """

    color: Optional[Any] = Field(
        '#fff',
        description='\n\n<p>boxplot color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p>boxplot border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\n\n<p>boxplot border width. No border when it is set to be 0.</p>\n<p>boxplot border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>boxplot 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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal14] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class ItemStyle171(BaseModel):
    color: Optional[Any] = Field(
        '#fff',
        description='\n\n<p>boxplot color. Since 5.2.0, it can be 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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p>boxplot border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        2,
        description='\n\n<p>boxplot border width. No border when it is set to be 0.</p>\n<p>boxplot border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>boxplot 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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        5,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'rgba(0,0,0,0.2)',
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        1,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        1,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class Emphasis73(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    itemStyle: Optional[ItemStyle171] = Field(None, description='')


class ItemStyle172(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>boxplot 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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p>boxplot border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>boxplot border width. No border when it is set to be 0.</p>\n<p>boxplot border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>boxplot 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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class Blur58(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-boxplot.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    itemStyle: Optional[ItemStyle172] = Field(None, description='')


class ItemStyle173(ItemStyle172):
    pass


class Select23(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-boxplot.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle173] = Field(None, description='')


class Decal15(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>
    <p>It works only if <code class="codespan">areaStyle</code> is set.</p>

    """

    pass


class ItemStyle174(BaseModel):
    """
    <p>Style of a single data.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>boxplot 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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p>boxplot border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>boxplot border width. No border when it is set to be 0.</p>\n<p>boxplot border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>boxplot 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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal15] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n<p>It works only if <code class="codespan">areaStyle</code> is set.</p>\n',
    )


class ItemStyle175(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>boxplot color. Since 5.2.0, it can be 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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p>boxplot border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\n\n<p>boxplot border width. No border when it is set to be 0.</p>\n<p>boxplot border width. No border when it is set to be 0.</p>\n',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\n\n\n<p>boxplot 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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class Emphasis74(BaseModel):
    """
    <p>Emphasis state of a single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle175] = Field(None, description='')


class ItemStyle176(ItemStyle172):
    pass


class Blur59(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of single data.</p>

    """

    itemStyle: Optional[ItemStyle176] = Field(None, description='')


class ItemStyle177(ItemStyle172):
    pass


class Select24(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle177] = Field(None, description='')


class TextStyle35(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip21(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle35] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum21(BaseModel):
    name: Optional[str] = Field(None, description='<p>Name of data item.</p>\n')
    value: Optional[Any] = Field(
        None,
        description='<p>Value of data item.</p>\n<pre><code class="lang-javascript">[min,  Q1,  median (or Q2),  Q3,  max]\n</code></pre>\n',
    )
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    itemStyle: Optional[ItemStyle174] = Field(
        None, description='<p>Style of a single data.</p>\n'
    )
    emphasis: Optional[Emphasis74] = Field(
        None, description='<p>Emphasis state of a single data.</p>\n'
    )
    blur: Optional[Blur59] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of single data.</p>\n',
    )
    select: Optional[Select24] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of single data.</p>\n',
    )
    tooltip: Optional[Tooltip21] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class _StyleName258(_StyleName3):
    pass


class Rich258(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName258] = Field(
        None, alias='<style_name>', description=''
    )


class Label221(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich258] = Field(
        None,
        description='<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',
    )


class ItemStyle178(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName259(_StyleName3):
    pass


class Rich259(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName259] = Field(
        None, alias='<style_name>', description=''
    )


class Label222(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich259] = Field(
        None,
        description='<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',
    )


class ItemStyle179(HandleStyle1):
    pass


class Emphasis75(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label222] = Field(None, description='')
    itemStyle: Optional[ItemStyle179] = Field(None, description='')


class _StyleName260(_StyleName3):
    pass


class Rich260(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName260] = Field(
        None, alias='<style_name>', description=''
    )


class Label223(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich260] = Field(
        None,
        description='<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',
    )


class ItemStyle180(HandleStyle1):
    pass


class Blur60(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label223] = Field(None, description='')
    itemStyle: Optional[ItemStyle180] = Field(None, description='')


class ItemStyle181(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName261(_StyleName3):
    pass


class Rich261(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName261] = Field(
        None, alias='<style_name>', description=''
    )


class Label224(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich261] = Field(
        None,
        description='<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',
    )


class _StyleName262(_StyleName3):
    pass


class Rich262(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName262] = Field(
        None, alias='<style_name>', description=''
    )


class Label225(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich262] = Field(
        None,
        description='<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',
    )


class ItemStyle182(HandleStyle1):
    pass


class Emphasis76(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label225] = Field(None, description='')
    itemStyle: Optional[ItemStyle182] = Field(None, description='')


class Datum22(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Available when using <a href="#series-boxplot.markPoint.data.type">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class="codespan">0</code> (xAxis, radiusAxis), <code class="codespan">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-boxplot.markPoint.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle181] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label224] = Field(None, description='')
    emphasis: Optional[Emphasis76] = Field(None, description='')


class MarkPoint5(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-boxplot.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-boxplot.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-boxplot.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label221] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle178] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis75] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur60] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum22]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-boxplot.markPoint.data.x">x</a>, <a href="#series-boxplot.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-boxplot.markPoint.data.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-boxplot.markPoint.data.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-boxplot.markPoint.data.valueIndex">valueIndex</a> or <a href="#series-boxplot.markPoint.data.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName263(_StyleName3):
    pass


class Rich263(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName263] = Field(
        None, alias='<style_name>', description=''
    )


class Label226(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich263] = Field(
        None,
        description='<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',
    )


class LineStyle178(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName264(_StyleName3):
    pass


class Rich264(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName264] = Field(
        None, alias='<style_name>', description=''
    )


class Label227(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich264] = Field(
        None,
        description='<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',
    )


class LineStyle179(LineStyle51):
    pass


class Emphasis77(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label227] = Field(None, description='')
    lineStyle: Optional[LineStyle179] = Field(None, description='')


class _StyleName265(_StyleName3):
    pass


class Rich265(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName265] = Field(
        None, alias='<style_name>', description=''
    )


class Label228(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich265] = Field(
        None,
        description='<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',
    )


class LineStyle180(LineStyle51):
    pass


class Blur61(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label228] = Field(None, description='')
    lineStyle: Optional[LineStyle180] = Field(None, description='')


class LineStyle181(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName266(_StyleName3):
    pass


class Rich266(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName266] = Field(
        None, alias='<style_name>', description=''
    )


class Label229(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich266] = Field(
        None,
        description='<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',
    )


class LineStyle182(LineStyle60):
    pass


class _StyleName267(_StyleName3):
    pass


class Rich267(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName267] = Field(
        None, alias='<style_name>', description=''
    )


class Label230(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich267] = Field(
        None,
        description='<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',
    )


class Emphasis78(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle182] = Field(None, description='')
    label: Optional[Label230] = Field(None, description='')


class LineStyle183(LineStyle60):
    pass


class _StyleName268(_StyleName3):
    pass


class Rich268(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName268] = Field(
        None, alias='<style_name>', description=''
    )


class Label231(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich268] = Field(
        None,
        description='<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',
    )


class Blur62(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle183] = Field(None, description='')
    label: Optional[Label231] = Field(None, description='')


class Field010(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-boxplot.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-boxplot.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle181] = Field(
        None,
        description='<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',
    )
    label: Optional[Label229] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis78] = Field(None, description='')
    blur: Optional[Blur62] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle184(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName269(_StyleName3):
    pass


class Rich269(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName269] = Field(
        None, alias='<style_name>', description=''
    )


class Label232(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich269] = Field(
        None,
        description='<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',
    )


class LineStyle185(LineStyle60):
    pass


class _StyleName270(_StyleName3):
    pass


class Rich270(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName270] = Field(
        None, alias='<style_name>', description=''
    )


class Label233(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich270] = Field(
        None,
        description='<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',
    )


class Emphasis79(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle185] = Field(None, description='')
    label: Optional[Label233] = Field(None, description='')


class LineStyle186(LineStyle60):
    pass


class _StyleName271(_StyleName3):
    pass


class Rich271(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName271] = Field(
        None, alias='<style_name>', description=''
    )


class Label234(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich271] = Field(
        None,
        description='<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',
    )


class Blur63(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle186] = Field(None, description='')
    label: Optional[Label234] = Field(None, description='')


class Field110(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-boxplot.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-boxplot.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle184] = Field(
        None,
        description='<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',
    )
    label: Optional[Label232] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis79] = Field(None, description='')
    blur: Optional[Blur63] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data12(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-boxplot.markLine.data.0.x">x</a>, <a href="#series-boxplot.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <ol start="2">
    <li><p>Assign coordinate position with <a href="#series-boxplot.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>
    </li>
    <li><p>Use <a href="#series-boxplot.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-boxplot.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-boxplot.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>
    </li>
    <li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>
    </li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>
    <pre><code>data: [

    {
            name: &#39;average line&#39;,
            // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported
            type: &#39;average&#39;
        },
        {
            name: &#39;Horizontal line with Y value at 100&#39;,
            yAxis: 100
        },
        [
            {
                // Use the same name with starting and ending point
                name: &#39;Minimum to Maximum&#39;,
                type: &#39;min&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],
    [
            {
                name: &#39;Markline between two points&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [{
            // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
            yAxis: &#39;max&#39;,
            x: &#39;90%&#39;
        }, {
            type: &#39;max&#39;
        }],
    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field010] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field110] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine5(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-boxplot.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label226] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle178] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis77] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur61] = Field(
        None,
        description='<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',
    )
    data: Optional[Data12] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-boxplot.markLine.data.0.x">x</a>, <a href="#series-boxplot.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-boxplot.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-boxplot.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-boxplot.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-boxplot.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>\n<pre><code>data: [\n\n{\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n[\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName272(_StyleName3):
    pass


class Rich272(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName272] = Field(
        None, alias='<style_name>', description=''
    )


class Label235(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich272] = Field(
        None,
        description='<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',
    )


class ItemStyle183(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName273(_StyleName3):
    pass


class Rich273(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName273] = Field(
        None, alias='<style_name>', description=''
    )


class Label236(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich273] = Field(
        None,
        description='<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',
    )


class ItemStyle184(HandleStyle1):
    pass


class Emphasis80(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label236] = Field(None, description='')
    itemStyle: Optional[ItemStyle184] = Field(None, description='')


class _StyleName274(_StyleName3):
    pass


class Rich274(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName274] = Field(
        None, alias='<style_name>', description=''
    )


class Label237(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich274] = Field(
        None,
        description='<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',
    )


class ItemStyle185(HandleStyle1):
    pass


class Blur64(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label237] = Field(None, description='')
    itemStyle: Optional[ItemStyle185] = Field(None, description='')


class ItemStyle186(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName275(_StyleName3):
    pass


class Rich275(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName275] = Field(
        None, alias='<style_name>', description=''
    )


class Label238(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich275] = Field(
        None,
        description='<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',
    )


class ItemStyle187(HandleStyle1):
    pass


class _StyleName276(_StyleName3):
    pass


class Rich276(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName276] = Field(
        None, alias='<style_name>', description=''
    )


class Label239(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich276] = Field(
        None,
        description='<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',
    )


class Emphasis81(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle187] = Field(None, description='')
    label: Optional[Label239] = Field(None, description='')


class ItemStyle188(HandleStyle1):
    pass


class _StyleName277(_StyleName3):
    pass


class Rich277(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName277] = Field(
        None, alias='<style_name>', description=''
    )


class Label240(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich277] = Field(
        None,
        description='<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',
    )


class Blur65(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle188] = Field(None, description='')
    label: Optional[Label240] = Field(None, description='')


class Field011(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-boxplot.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-boxplot.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle186] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label238] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis81] = Field(None, description='')
    blur: Optional[Blur65] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle189(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName278(_StyleName3):
    pass


class Rich278(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName278] = Field(
        None, alias='<style_name>', description=''
    )


class Label241(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich278] = Field(
        None,
        description='<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',
    )


class ItemStyle190(HandleStyle1):
    pass


class _StyleName279(_StyleName3):
    pass


class Rich279(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName279] = Field(
        None, alias='<style_name>', description=''
    )


class Label242(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich279] = Field(
        None,
        description='<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',
    )


class Emphasis82(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle190] = Field(None, description='')
    label: Optional[Label242] = Field(None, description='')


class ItemStyle191(HandleStyle1):
    pass


class _StyleName280(_StyleName3):
    pass


class Rich280(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName280] = Field(
        None, alias='<style_name>', description=''
    )


class Label243(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich280] = Field(
        None,
        description='<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',
    )


class Blur66(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle191] = Field(None, description='')
    label: Optional[Label243] = Field(None, description='')


class Field111(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-boxplot.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-boxplot.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle189] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label241] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis82] = Field(None, description='')
    blur: Optional[Blur66] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data13(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-boxplot.markArea.data.0.x">x</a>, <a href="#series-boxplot.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <ol start="2">
    <li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using
    <a href="#series-boxplot.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>
    </li>
    <li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-boxplot.markArea.data.0.type">type</a>, where <a href="#series-boxplot.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-boxplot.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>
    </li>
    <li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [


        [
            {
                name: &#39;From average to max&#39;,
                type: &#39;average&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],

        [
            {
                name: &#39;Mark area between two points in data coordiantes&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [
            {
                name: &#39;From 60 to 80&#39;,
                yAxis: 60
            },
            {
                yAxis: 80
            }
        ], [
            {
                name: &#39;Mark area covers all data&#39;
                coord: [&#39;min&#39;, &#39;min&#39;]
            },
            {
                coord: [&#39;max&#39;, &#39;max&#39;]
            }
        ],
    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field011] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field111] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea5(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label235] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle183] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis80] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur64] = Field(
        None,
        description='<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',
    )
    data: Optional[Data13] = Field(
        None,
        description='<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-boxplot.markArea.data.0.x">x</a>, <a href="#series-boxplot.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>\n</ol>\n<ol start="2">\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href="#series-boxplot.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n<li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-boxplot.markArea.data.0.type">type</a>, where <a href="#series-boxplot.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-boxplot.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>\n</li>\n<li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition5(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class TextStyle36(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip22(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle36] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series10(BaseModel):
    """
        <p><a href="https://en.wikipedia.org/wiki/Box_plot" target="_blank">Boxplot</a> is a convenient way of graphically depicting groups of numerical data through their quartiles.</p>
    <p><strong>Example:</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=boxplot-light-velocity&edit=1&reset=1" width="600" height="400"></iframe>


    <p><br>
    Multiple <code class="codespan">series</code> can be displayed in the same coordinate system. Please refer to <a href="http://localhost/echarts-website/examples/en/editor.html?c=boxplot-multi&amp;edit=1&amp;reset=1" target="_blank">this example</a>.</p>
    <p><br>
    <br></p>

    """

    type: Optional[str] = Field('boxplot', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    coordinateSystem: Optional[str] = Field(
        'cartesian2d',
        description='<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-cartesian2d.xAxisIndex">xAxisIndex</a> and <a href="#series-cartesian2d.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    hoverAnimation: Optional[bool] = Field(
        True,
        description='<p>Whether to enable the animation when hovering on box.</p>\n',
    )
    layout: Optional[str] = Field(
        None,
        description='<p>Layout methods, whose optional values are:</p>\n<ul>\n<li><p><code class="codespan">&#39;horizontal&#39;</code>: horizontally layout all boxes.</p>\n</li>\n<li><p><code class="codespan">&#39;vertical&#39;</code>: vertically layout all boxes.</p>\n</li>\n</ul>\n<p>The default value is decided by:</p>\n<ul>\n<li>if there is a <code class="codespan">category</code> axis:<ul>\n<li>if it is horizontal, use <code class="codespan">&#39;horizontal&#39;</code>;</li>\n<li>otherwise use <code class="codespan">&#39;vertical&#39;</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code class="codespan">&#39;horizontal&#39;</code>.</li>\n</ul>\n',
    )
    boxWidth: Optional[Any] = Field(
        '[7, 50]',
        description='\n\n<p>Up and bottom boundary of box width. The array is in the form of <code class="codespan">[min, max]</code>.</p>\n<p>It could be absolute value in pixel, such as <code class="codespan">[7, 50]</code>, or percentage, such as <code class="codespan">[&#39;40%&#39;, &#39;90%&#39;]</code>. The percentage means the percentage to the maximum possible width.</p>\n',
    )
    itemStyle: Optional[ItemStyle170] = Field(
        None, description='<p>Style of boxplot.</p>\n'
    )
    emphasis: Optional[Emphasis73] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur58] = Field(
        None,
        description='<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-boxplot.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select23] = Field(
        None,
        description='<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-boxplot.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum21]] = Field(
        None,
        description='<p>Data should be the two-dimensional array shown as follow.</p>\n<pre><code class="lang-javascript">[\n    [655, 850, 940, 980, 1175],\n    [672.5, 800, 845, 885, 1012.5],\n    [780, 840, 855, 880, 940],\n    [621.25, 767.5, 815, 865, 1011.25],\n    { // the data item could also be an Object, so that it could contains special settings for this data item.\n        value: [713.75, 807.5, 810, 870, 963.75],\n        itemStyle: {...}\n    },\n    ...\n]\n</code></pre>\n<p>Every data item (each line in the example above) in the two-dimensional array will be rendered into a box, and each line have five values as:</p>\n<pre><code class="lang-javascript">[min,  Q1,  median (or Q2),  Q3,  max]\n</code></pre>\n<p><strong>Data Processing</strong></p>\n<p>ECharts doesn&#39;t contain data processing modules, so the five statistic values should be calculated by yourself and then passes into <code class="codespan">boxplot</code>.</p>\n<p>However, ECharts also provide some simple <a href="https://github.com/apache/echarts/tree/master/extension/dataTool" target="_blank">raw data processing tools</a>. For example, this <a href="http://localhost/echarts-website/examples/en/editor.html?c=boxplot-light-velocity&amp;edit=1&amp;reset=1" target="_blank">example</a> uses <code class="codespan">echarts.dataTool.prepareBoxplotData</code> to proceed simple data statistics.</p>\n',
    )
    markPoint: Optional[MarkPoint5] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine5] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea5] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in Boxplot .</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in Boxplot , 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        800,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'elasticOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition5] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip22] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class ItemStyle192(BaseModel):
    """
    <p>Item style of candlestick.</p>

    """

    color: Optional[Any] = Field(
        '#c23531',
        description='\n\n<p>Fill color of bullish candle stick.</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',
    )
    color0: Optional[Any] = Field(
        '#314656',
        description='\n\n<p>Fill color of bearish candle stick.</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',
    )
    borderColor: Optional[Any] = Field(
        '#c23531',
        description='\n\n<p>Border color of bullish candle stick.</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',
    )
    borderColor0: Optional[Any] = Field(
        '#314656',
        description='\n\n<p>Border color of bearish candle stick.</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',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\n\n<p>Border width of candlestick. There is no border when it is <code class="codespan">0</code>.</p>\n',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class ItemStyle193(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Fill color of bullish candle stick.</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',
    )
    color0: Optional[Any] = Field(
        None,
        description='\n\n<p>Fill color of bearish candle stick.</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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Border color of bullish candle stick.</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',
    )
    borderColor0: Optional[Any] = Field(
        None,
        description='\n\n<p>Border color of bearish candle stick.</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',
    )
    borderWidth: Optional[float] = Field(
        2,
        description='\n\n<p>Border width of candlestick. There is no border when it is <code class="codespan">0</code>.</p>\n',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class Emphasis83(BaseModel):
    """
    <p>Emphasis style of candlestick.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    itemStyle: Optional[ItemStyle193] = Field(None, description='')


class ItemStyle194(ItemStyle193):
    pass


class Blur67(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-candlestick.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    itemStyle: Optional[ItemStyle194] = Field(None, description='')


class ItemStyle195(ItemStyle193):
    pass


class Select25(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-candlestick.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle195] = Field(None, description='')


class ItemStyle196(BaseModel):
    """
    <p>Style of a candle box.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p>Fill color of bullish candle stick.</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',
    )
    color0: Optional[Any] = Field(
        None,
        description='\n\n<p>Fill color of bearish candle stick.</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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Border color of bullish candle stick.</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',
    )
    borderColor0: Optional[Any] = Field(
        None,
        description='\n\n<p>Border color of bearish candle stick.</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',
    )
    borderWidth: Optional[float] = Field(
        None,
        description='\n\n<p>Border width of candlestick. There is no border when it is <code class="codespan">0</code>.</p>\n',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class ItemStyle197(ItemStyle196):
    pass


class Emphasis84(BaseModel):
    """
    <p>Emphasis style of a candle box.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle197] = Field(None, description='')


class ItemStyle198(ItemStyle196):
    pass


class Blur68(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of single data.</p>

    """

    itemStyle: Optional[ItemStyle198] = Field(None, description='')


class ItemStyle199(ItemStyle196):
    pass


class Select26(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle199] = Field(None, description='')


class TextStyle37(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip23(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle37] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum23(BaseModel):
    name: Optional[str] = Field(None, description='<p>Name of data item.</p>\n')
    value: Optional[Any] = Field(
        None,
        description='<p>Value of data item.</p>\n<pre><code class="lang-javascript">[open, close, lowest, highest]  (namely: [opening value, closing value, lowest value, highest value])\n</code></pre>\n',
    )
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    itemStyle: Optional[ItemStyle196] = Field(
        None, description='<p>Style of a candle box.</p>\n'
    )
    emphasis: Optional[Emphasis84] = Field(
        None, description='<p>Emphasis style of a candle box.</p>\n'
    )
    blur: Optional[Blur68] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of single data.</p>\n',
    )
    select: Optional[Select26] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of single data.</p>\n',
    )
    tooltip: Optional[Tooltip23] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class _StyleName281(_StyleName3):
    pass


class Rich281(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName281] = Field(
        None, alias='<style_name>', description=''
    )


class Label244(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich281] = Field(
        None,
        description='<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',
    )


class ItemStyle200(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName282(_StyleName3):
    pass


class Rich282(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName282] = Field(
        None, alias='<style_name>', description=''
    )


class Label245(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich282] = Field(
        None,
        description='<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',
    )


class ItemStyle201(HandleStyle1):
    pass


class Emphasis85(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label245] = Field(None, description='')
    itemStyle: Optional[ItemStyle201] = Field(None, description='')


class _StyleName283(_StyleName3):
    pass


class Rich283(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName283] = Field(
        None, alias='<style_name>', description=''
    )


class Label246(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich283] = Field(
        None,
        description='<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',
    )


class ItemStyle202(HandleStyle1):
    pass


class Blur69(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label246] = Field(None, description='')
    itemStyle: Optional[ItemStyle202] = Field(None, description='')


class ItemStyle203(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName284(_StyleName3):
    pass


class Rich284(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName284] = Field(
        None, alias='<style_name>', description=''
    )


class Label247(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich284] = Field(
        None,
        description='<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',
    )


class _StyleName285(_StyleName3):
    pass


class Rich285(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName285] = Field(
        None, alias='<style_name>', description=''
    )


class Label248(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich285] = Field(
        None,
        description='<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',
    )


class ItemStyle204(HandleStyle1):
    pass


class Emphasis86(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label248] = Field(None, description='')
    itemStyle: Optional[ItemStyle204] = Field(None, description='')


class Datum24(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Available when using <a href="#series-candlestick.markPoint.data.type">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class="codespan">0</code> (xAxis, radiusAxis), <code class="codespan">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-candlestick.markPoint.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle203] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label247] = Field(None, description='')
    emphasis: Optional[Emphasis86] = Field(None, description='')


class MarkPoint6(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-candlestick.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-candlestick.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-candlestick.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label244] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle200] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis85] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur69] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum24]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-candlestick.markPoint.data.x">x</a>, <a href="#series-candlestick.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-candlestick.markPoint.data.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-candlestick.markPoint.data.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-candlestick.markPoint.data.valueIndex">valueIndex</a> or <a href="#series-candlestick.markPoint.data.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName286(_StyleName3):
    pass


class Rich286(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName286] = Field(
        None, alias='<style_name>', description=''
    )


class Label249(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich286] = Field(
        None,
        description='<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',
    )


class LineStyle187(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName287(_StyleName3):
    pass


class Rich287(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName287] = Field(
        None, alias='<style_name>', description=''
    )


class Label250(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich287] = Field(
        None,
        description='<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',
    )


class LineStyle188(LineStyle51):
    pass


class Emphasis87(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label250] = Field(None, description='')
    lineStyle: Optional[LineStyle188] = Field(None, description='')


class _StyleName288(_StyleName3):
    pass


class Rich288(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName288] = Field(
        None, alias='<style_name>', description=''
    )


class Label251(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich288] = Field(
        None,
        description='<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',
    )


class LineStyle189(LineStyle51):
    pass


class Blur70(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label251] = Field(None, description='')
    lineStyle: Optional[LineStyle189] = Field(None, description='')


class LineStyle190(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName289(_StyleName3):
    pass


class Rich289(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName289] = Field(
        None, alias='<style_name>', description=''
    )


class Label252(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich289] = Field(
        None,
        description='<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',
    )


class LineStyle191(LineStyle60):
    pass


class _StyleName290(_StyleName3):
    pass


class Rich290(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName290] = Field(
        None, alias='<style_name>', description=''
    )


class Label253(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich290] = Field(
        None,
        description='<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',
    )


class Emphasis88(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle191] = Field(None, description='')
    label: Optional[Label253] = Field(None, description='')


class LineStyle192(LineStyle60):
    pass


class _StyleName291(_StyleName3):
    pass


class Rich291(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName291] = Field(
        None, alias='<style_name>', description=''
    )


class Label254(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich291] = Field(
        None,
        description='<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',
    )


class Blur71(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle192] = Field(None, description='')
    label: Optional[Label254] = Field(None, description='')


class Field012(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-candlestick.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-candlestick.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle190] = Field(
        None,
        description='<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',
    )
    label: Optional[Label252] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis88] = Field(None, description='')
    blur: Optional[Blur71] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle193(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName292(_StyleName3):
    pass


class Rich292(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName292] = Field(
        None, alias='<style_name>', description=''
    )


class Label255(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich292] = Field(
        None,
        description='<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',
    )


class LineStyle194(LineStyle60):
    pass


class _StyleName293(_StyleName3):
    pass


class Rich293(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName293] = Field(
        None, alias='<style_name>', description=''
    )


class Label256(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich293] = Field(
        None,
        description='<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',
    )


class Emphasis89(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle194] = Field(None, description='')
    label: Optional[Label256] = Field(None, description='')


class LineStyle195(LineStyle60):
    pass


class _StyleName294(_StyleName3):
    pass


class Rich294(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName294] = Field(
        None, alias='<style_name>', description=''
    )


class Label257(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich294] = Field(
        None,
        description='<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',
    )


class Blur72(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle195] = Field(None, description='')
    label: Optional[Label257] = Field(None, description='')


class Field112(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-candlestick.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-candlestick.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle193] = Field(
        None,
        description='<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',
    )
    label: Optional[Label255] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis89] = Field(None, description='')
    blur: Optional[Blur72] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data14(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-candlestick.markLine.data.0.x">x</a>, <a href="#series-candlestick.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <ol start="2">
    <li><p>Assign coordinate position with <a href="#series-candlestick.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>
    </li>
    <li><p>Use <a href="#series-candlestick.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-candlestick.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-candlestick.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>
    </li>
    <li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>
    </li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>
    <pre><code>data: [

    {
            name: &#39;average line&#39;,
            // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported
            type: &#39;average&#39;
        },
        {
            name: &#39;Horizontal line with Y value at 100&#39;,
            yAxis: 100
        },
        [
            {
                // Use the same name with starting and ending point
                name: &#39;Minimum to Maximum&#39;,
                type: &#39;min&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],
    [
            {
                name: &#39;Markline between two points&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [{
            // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
            yAxis: &#39;max&#39;,
            x: &#39;90%&#39;
        }, {
            type: &#39;max&#39;
        }],
    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field012] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field112] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine6(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-candlestick.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label249] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle187] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis87] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur70] = Field(
        None,
        description='<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',
    )
    data: Optional[Data14] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-candlestick.markLine.data.0.x">x</a>, <a href="#series-candlestick.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-candlestick.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-candlestick.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-candlestick.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-candlestick.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>\n<pre><code>data: [\n\n{\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n[\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName295(_StyleName3):
    pass


class Rich295(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName295] = Field(
        None, alias='<style_name>', description=''
    )


class Label258(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich295] = Field(
        None,
        description='<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',
    )


class ItemStyle205(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName296(_StyleName3):
    pass


class Rich296(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName296] = Field(
        None, alias='<style_name>', description=''
    )


class Label259(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich296] = Field(
        None,
        description='<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',
    )


class ItemStyle206(HandleStyle1):
    pass


class Emphasis90(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label259] = Field(None, description='')
    itemStyle: Optional[ItemStyle206] = Field(None, description='')


class _StyleName297(_StyleName3):
    pass


class Rich297(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName297] = Field(
        None, alias='<style_name>', description=''
    )


class Label260(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich297] = Field(
        None,
        description='<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',
    )


class ItemStyle207(HandleStyle1):
    pass


class Blur73(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label260] = Field(None, description='')
    itemStyle: Optional[ItemStyle207] = Field(None, description='')


class ItemStyle208(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName298(_StyleName3):
    pass


class Rich298(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName298] = Field(
        None, alias='<style_name>', description=''
    )


class Label261(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich298] = Field(
        None,
        description='<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',
    )


class ItemStyle209(HandleStyle1):
    pass


class _StyleName299(_StyleName3):
    pass


class Rich299(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName299] = Field(
        None, alias='<style_name>', description=''
    )


class Label262(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich299] = Field(
        None,
        description='<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',
    )


class Emphasis91(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle209] = Field(None, description='')
    label: Optional[Label262] = Field(None, description='')


class ItemStyle210(HandleStyle1):
    pass


class _StyleName300(_StyleName3):
    pass


class Rich300(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName300] = Field(
        None, alias='<style_name>', description=''
    )


class Label263(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich300] = Field(
        None,
        description='<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',
    )


class Blur74(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle210] = Field(None, description='')
    label: Optional[Label263] = Field(None, description='')


class Field013(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-candlestick.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-candlestick.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle208] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label261] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis91] = Field(None, description='')
    blur: Optional[Blur74] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle211(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName301(_StyleName3):
    pass


class Rich301(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName301] = Field(
        None, alias='<style_name>', description=''
    )


class Label264(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich301] = Field(
        None,
        description='<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',
    )


class ItemStyle212(HandleStyle1):
    pass


class _StyleName302(_StyleName3):
    pass


class Rich302(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName302] = Field(
        None, alias='<style_name>', description=''
    )


class Label265(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich302] = Field(
        None,
        description='<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',
    )


class Emphasis92(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle212] = Field(None, description='')
    label: Optional[Label265] = Field(None, description='')


class ItemStyle213(HandleStyle1):
    pass


class _StyleName303(_StyleName3):
    pass


class Rich303(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName303] = Field(
        None, alias='<style_name>', description=''
    )


class Label266(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich303] = Field(
        None,
        description='<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',
    )


class Blur75(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle213] = Field(None, description='')
    label: Optional[Label266] = Field(None, description='')


class Field113(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-candlestick.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-candlestick.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle211] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label264] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis92] = Field(None, description='')
    blur: Optional[Blur75] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data15(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-candlestick.markArea.data.0.x">x</a>, <a href="#series-candlestick.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <ol start="2">
    <li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using
    <a href="#series-candlestick.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>
    </li>
    <li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-candlestick.markArea.data.0.type">type</a>, where <a href="#series-candlestick.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-candlestick.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>
    </li>
    <li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [


        [
            {
                name: &#39;From average to max&#39;,
                type: &#39;average&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],

        [
            {
                name: &#39;Mark area between two points in data coordiantes&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [
            {
                name: &#39;From 60 to 80&#39;,
                yAxis: 60
            },
            {
                yAxis: 80
            }
        ], [
            {
                name: &#39;Mark area covers all data&#39;
                coord: [&#39;min&#39;, &#39;min&#39;]
            },
            {
                coord: [&#39;max&#39;, &#39;max&#39;]
            }
        ],
    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field013] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field113] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea6(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label258] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle205] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis90] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur73] = Field(
        None,
        description='<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',
    )
    data: Optional[Data15] = Field(
        None,
        description='<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-candlestick.markArea.data.0.x">x</a>, <a href="#series-candlestick.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>\n</ol>\n<ol start="2">\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href="#series-candlestick.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n<li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-candlestick.markArea.data.0.type">type</a>, where <a href="#series-candlestick.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-candlestick.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>\n</li>\n<li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition6(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class TextStyle38(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip24(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle38] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series11(BaseModel):
    """
        <p>A <a href="https://en.wikipedia.org/wiki/Candlestick_chart" target="_blank">candlestick</a> chart (also called Japanese candlestick chart) is a style of financial chart used to describe price movements of a security, derivative, or currency.</p>
    <p>ECharts3 supports both <code class="codespan">&#39;candlestick&#39;</code> and <code class="codespan">&#39;k&#39;</code> in <a href="#(series.type">series.type</a> (<code class="codespan">&#39;k&#39;</code> would automatically turns into <code class="codespan">&#39;candlestick&#39;</code>).</p>
    <p><strong>An example:</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=candlestick-sh&edit=1&reset=1" width="600" height="400"></iframe>



    <p><br>
    <strong>About color of increase and decrease</strong></p>
    <p>Different countries or regions have different implications on the color of candle stick chart. It may use red to imply increasing with red and decreasing with blue (in China mainland, Taiwan, Japan, Koera, and so on), or to imply increasing with green and decreasing with red (in Europe, North America, Hong Kong, Singapore, and so on). Besides color, the increase and decrease of stock may also be represented with candle stick with or without filling colors.</p>
    <p>We use red to represent increasing and blue decreasing by default. If you want to change the configuration, you may change the following parameters.</p>
    <ul>
    <li><a href="#series-candlestick.itemStyle.color">series-candlestick.itemStyle.color</a>: fill color for bullish candle stick (namely, increase)</li>
    <li><a href="#series-candlestick.itemStyle.color0">series-candlestick.itemStyle.color0</a>: fill color for bearish candle stick (namely, decrease)</li>
    <li><a href="#series-candlestick.itemStyle.borderColor">series-candlestick.itemStyle.borderColor</a>: border color for bullish candle stick (namely, increase)</li>
    <li><a href="series-candlestick.itemStyle.borderColor0" target="_blank">series-candlestick.itemStyle.borderColor0</a>: border color for bearish candle stick (namely, decrease)</li>
    </ul>
    <p><br>
    <br></p>

    """

    type: Optional[str] = Field('candlestick', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    coordinateSystem: Optional[str] = Field(
        'cartesian2d',
        description='<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-cartesian2d.xAxisIndex">xAxisIndex</a> and <a href="#series-cartesian2d.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    hoverAnimation: Optional[bool] = Field(
        True, description='<p>Whether to enable animation when hovering on box.</p>\n'
    )
    layout: Optional[str] = Field(
        None,
        description='<p>Layout method, whose values may be:</p>\n<ul>\n<li><p><code class="codespan">&#39;horizontal&#39;</code>: horizontally layout all boxs.</p>\n</li>\n<li><p><code class="codespan">&#39;vertical&#39;</code>: vertically layout all boxs.</p>\n</li>\n</ul>\n<p>The default value is decided by:</p>\n<ul>\n<li>if there is a <code class="codespan">category</code> axis:<ul>\n<li>if it is horizontal, use <code class="codespan">&#39;horizontal&#39;</code>;</li>\n<li>otherwise use <code class="codespan">&#39;vertical&#39;</code>;</li>\n</ul>\n</li>\n<li>otherwise use <code class="codespan">&#39;horizontal&#39;</code>.</li>\n</ul>\n',
    )
    barWidth: Optional[float] = Field(
        None,
        description='\n\n<p>Specify bar width. Absolute value (like <code class="codespan">10</code>) or percentage (like <code class="codespan">&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n',
    )
    barMinWidth: Optional[Union[float, str]] = Field(
        None,
        description='<p>Specify bar min width. Absolute value (like <code class="codespan">10</code>) or percentage (like <code class="codespan">&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n',
    )
    barMaxWidth: Optional[Union[float, str]] = Field(
        None,
        description='<p>Specify bar max width. Absolute value (like <code class="codespan">10</code>) or percentage (like <code class="codespan">&#39;20%&#39;</code>, according to band width) can be used. Auto adapt by default.</p>\n',
    )
    itemStyle: Optional[ItemStyle192] = Field(
        None, description='<p>Item style of candlestick.</p>\n'
    )
    emphasis: Optional[Emphasis83] = Field(
        None, description='<p>Emphasis style of candlestick.</p>\n'
    )
    blur: Optional[Blur67] = Field(
        None,
        description='<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-candlestick.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select25] = Field(
        None,
        description='<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-candlestick.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    large: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable the optimization of large-scale data. It could be set when large data causes performance problem.</p>\n<p>After being enabled, <code class="codespan">largeThreshold</code> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>But when the optimization enabled, the style of single data item can&#39;t be customized any more.</p>\n',
    )
    largeThreshold: Optional[float] = Field(
        600, description='\n\n<p>The threshold enabling the drawing optimization.</p>\n'
    )
    progressive: Optional[float] = Field(
        3000,
        description='<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: Optional[float] = Field(
        10000,
        description='<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n',
    )
    progressiveChunkMode: Optional[str] = Field(
        'mod',
        description='<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class="codespan">&#39;sequential&#39;</code>: slice data by data index.</li>\n<li><code class="codespan">&#39;mod&#39;</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum23]] = Field(
        None,
        description='<p>Data should be the two-dimensional array shown as follows.</p>\n<pre><code class="lang-javascript">[\n    [2320.26, 2320.26, 2287.3,  2362.94],\n    [2300,    2291.3,  2288.26, 2308.38],\n    { // the data item could also be an Object, so that it could contains special settings for this data item.\n        value: [2300,    2291.3,  2288.26, 2308.38],\n        itemStyle: {...}\n    },\n    ...\n]\n</code></pre>\n<p>Every data item (each line in the example above) represents a box, which contains 4 values. They are:</p>\n<pre><code class="lang-javascript">[open, close, lowest, highest]  (namely: [opening value, closing value, lowest value, highest value])\n</code></pre>\n',
    )
    markPoint: Optional[MarkPoint6] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine6] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea6] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    clip: Optional[bool] = Field(
        True,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v4.5.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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in Candlestick .</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in Candlestick , 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'linear',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition6] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip24] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName304(_StyleName3):
    pass


class Rich304(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName304] = Field(
        None, alias='<style_name>', description=''
    )


class Label267(BaseModel):
    """
    <p>Work for <a href="#series-heatmap.coordinateSystem">coordinateSystem</a>: &#39;cartesian2d&#39;.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich304] = Field(
        None,
        description='<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',
    )


class LabelLayout9(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class ItemStyle214(BaseModel):
    """
    <p>Work for <a href="#series-heatmap.coordinateSystem">coordinateSystem</a>: &#39;cartesian2d&#39;.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    borderRadius: Optional[Union[float, Any]] = Field(
        0,
        description='<blockquote>\n<p>Since <code class="codespan">v5.3.1</code></p>\n</blockquote>\n\n\n<p>The radius of rounded corner. Its unit is px. And it supports use array to respectively specify the 4 corner radiuses.</p>\n<p>For example:</p>\n<pre><code>borderRadius: 5, // consistently set the size of 4 rounded corners\nborderRadius: [5, 5, 0, 0] // (clockwise upper left, upper right, bottom right and bottom left)\n</code></pre>',
    )


class ItemStyle215(ItemStyle15):
    pass


class _StyleName305(_StyleName3):
    pass


class Rich305(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName305] = Field(
        None, alias='<style_name>', description=''
    )


class Label268(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich305] = Field(
        None,
        description='<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',
    )


class Emphasis93(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    itemStyle: Optional[ItemStyle215] = Field(None, description='')
    label: Optional[Label268] = Field(None, description='')


class UniversalTransition7(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class ItemStyle216(HandleStyle1):
    pass


class _StyleName306(_StyleName3):
    pass


class Rich306(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName306] = Field(
        None, alias='<style_name>', description=''
    )


class Label269(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich306] = Field(
        None,
        description='<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',
    )


class Blur76(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-heatmap.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    itemStyle: Optional[ItemStyle216] = Field(None, description='')
    label: Optional[Label269] = Field(None, description='')


class ItemStyle217(HandleStyle1):
    pass


class _StyleName307(_StyleName3):
    pass


class Rich307(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName307] = Field(
        None, alias='<style_name>', description=''
    )


class Label270(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich307] = Field(
        None,
        description='<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',
    )


class Select27(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-heatmap.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle217] = Field(None, description='')
    label: Optional[Label270] = Field(None, description='')


class _StyleName308(_StyleName3):
    pass


class Rich308(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName308] = Field(
        None, alias='<style_name>', description=''
    )


class Label271(BaseModel):
    """
    <p>It is valid with <a href="#series-heatmap.coordinateSystem">coordinateSystem</a> of &#39;cartesian2d&#39; value.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich308] = Field(
        None,
        description='<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',
    )


class ItemStyle218(ItemStyle214):
    """
    <p>Style of a single data point. It is valid with <a href="#series-heatmap.coordinateSystem">coordinateSystem</a> of &#39;cartesian2d&#39; value.</p>

    """

    pass


class ItemStyle219(ItemStyle15):
    pass


class _StyleName309(_StyleName3):
    pass


class Rich309(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName309] = Field(
        None, alias='<style_name>', description=''
    )


class Label272(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich309] = Field(
        None,
        description='<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',
    )


class Emphasis94(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle219] = Field(None, description='')
    label: Optional[Label272] = Field(None, description='')


class Datum25(BaseModel):
    name: Optional[str] = Field(None, description='<p>Name of data item.</p>\n')
    value: Optional[Any] = Field(None, description='<p>Value of data item.</p>\n')
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    label: Optional[Label271] = Field(
        None,
        description='<p>It is valid with <a href="#series-heatmap.coordinateSystem">coordinateSystem</a> of &#39;cartesian2d&#39; value.</p>\n',
    )
    itemStyle: Optional[ItemStyle218] = Field(
        None,
        description='<p>Style of a single data point. It is valid with <a href="#series-heatmap.coordinateSystem">coordinateSystem</a> of &#39;cartesian2d&#39; value.</p>\n',
    )
    emphasis: Optional[Emphasis94] = Field(None, description='')


class _StyleName310(_StyleName3):
    pass


class Rich310(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName310] = Field(
        None, alias='<style_name>', description=''
    )


class Label273(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich310] = Field(
        None,
        description='<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',
    )


class ItemStyle220(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName311(_StyleName3):
    pass


class Rich311(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName311] = Field(
        None, alias='<style_name>', description=''
    )


class Label274(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich311] = Field(
        None,
        description='<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',
    )


class ItemStyle221(HandleStyle1):
    pass


class Emphasis95(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label274] = Field(None, description='')
    itemStyle: Optional[ItemStyle221] = Field(None, description='')


class _StyleName312(_StyleName3):
    pass


class Rich312(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName312] = Field(
        None, alias='<style_name>', description=''
    )


class Label275(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich312] = Field(
        None,
        description='<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',
    )


class ItemStyle222(HandleStyle1):
    pass


class Blur77(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label275] = Field(None, description='')
    itemStyle: Optional[ItemStyle222] = Field(None, description='')


class ItemStyle223(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName313(_StyleName3):
    pass


class Rich313(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName313] = Field(
        None, alias='<style_name>', description=''
    )


class Label276(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich313] = Field(
        None,
        description='<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',
    )


class _StyleName314(_StyleName3):
    pass


class Rich314(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName314] = Field(
        None, alias='<style_name>', description=''
    )


class Label277(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich314] = Field(
        None,
        description='<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',
    )


class ItemStyle224(HandleStyle1):
    pass


class Emphasis96(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label277] = Field(None, description='')
    itemStyle: Optional[ItemStyle224] = Field(None, description='')


class Datum26(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle223] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label276] = Field(None, description='')
    emphasis: Optional[Emphasis96] = Field(None, description='')


class MarkPoint7(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-heatmap.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-heatmap.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-heatmap.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label273] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle220] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis95] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur77] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum26]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-heatmap.markPoint.data.x">x</a>, <a href="#series-heatmap.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName315(_StyleName3):
    pass


class Rich315(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName315] = Field(
        None, alias='<style_name>', description=''
    )


class Label278(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich315] = Field(
        None,
        description='<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',
    )


class LineStyle196(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName316(_StyleName3):
    pass


class Rich316(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName316] = Field(
        None, alias='<style_name>', description=''
    )


class Label279(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich316] = Field(
        None,
        description='<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',
    )


class LineStyle197(LineStyle51):
    pass


class Emphasis97(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label279] = Field(None, description='')
    lineStyle: Optional[LineStyle197] = Field(None, description='')


class _StyleName317(_StyleName3):
    pass


class Rich317(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName317] = Field(
        None, alias='<style_name>', description=''
    )


class Label280(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich317] = Field(
        None,
        description='<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',
    )


class LineStyle198(LineStyle51):
    pass


class Blur78(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label280] = Field(None, description='')
    lineStyle: Optional[LineStyle198] = Field(None, description='')


class LineStyle199(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName318(_StyleName3):
    pass


class Rich318(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName318] = Field(
        None, alias='<style_name>', description=''
    )


class Label281(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich318] = Field(
        None,
        description='<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',
    )


class LineStyle200(LineStyle60):
    pass


class _StyleName319(_StyleName3):
    pass


class Rich319(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName319] = Field(
        None, alias='<style_name>', description=''
    )


class Label282(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich319] = Field(
        None,
        description='<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',
    )


class Emphasis98(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle200] = Field(None, description='')
    label: Optional[Label282] = Field(None, description='')


class LineStyle201(LineStyle60):
    pass


class _StyleName320(_StyleName3):
    pass


class Rich320(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName320] = Field(
        None, alias='<style_name>', description=''
    )


class Label283(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich320] = Field(
        None,
        description='<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',
    )


class Blur79(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle201] = Field(None, description='')
    label: Optional[Label283] = Field(None, description='')


class Field014(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle199] = Field(
        None,
        description='<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',
    )
    label: Optional[Label281] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis98] = Field(None, description='')
    blur: Optional[Blur79] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle202(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName321(_StyleName3):
    pass


class Rich321(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName321] = Field(
        None, alias='<style_name>', description=''
    )


class Label284(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich321] = Field(
        None,
        description='<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',
    )


class LineStyle203(LineStyle60):
    pass


class _StyleName322(_StyleName3):
    pass


class Rich322(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName322] = Field(
        None, alias='<style_name>', description=''
    )


class Label285(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich322] = Field(
        None,
        description='<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',
    )


class Emphasis99(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle203] = Field(None, description='')
    label: Optional[Label285] = Field(None, description='')


class LineStyle204(LineStyle60):
    pass


class _StyleName323(_StyleName3):
    pass


class Rich323(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName323] = Field(
        None, alias='<style_name>', description=''
    )


class Label286(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich323] = Field(
        None,
        description='<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',
    )


class Blur80(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle204] = Field(None, description='')
    label: Optional[Label286] = Field(None, description='')


class Field114(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle202] = Field(
        None,
        description='<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',
    )
    label: Optional[Label284] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis99] = Field(None, description='')
    blur: Optional[Blur80] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data16(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-heatmap.markLine.data.0.x">x</a>, <a href="#series-heatmap.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field014] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field114] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine7(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-heatmap.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label278] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle196] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis97] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur78] = Field(
        None,
        description='<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',
    )
    data: Optional[Data16] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-heatmap.markLine.data.0.x">x</a>, <a href="#series-heatmap.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n\n[\n        {\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName324(_StyleName3):
    pass


class Rich324(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName324] = Field(
        None, alias='<style_name>', description=''
    )


class Label287(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich324] = Field(
        None,
        description='<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',
    )


class ItemStyle225(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName325(_StyleName3):
    pass


class Rich325(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName325] = Field(
        None, alias='<style_name>', description=''
    )


class Label288(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich325] = Field(
        None,
        description='<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',
    )


class ItemStyle226(HandleStyle1):
    pass


class Emphasis100(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label288] = Field(None, description='')
    itemStyle: Optional[ItemStyle226] = Field(None, description='')


class _StyleName326(_StyleName3):
    pass


class Rich326(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName326] = Field(
        None, alias='<style_name>', description=''
    )


class Label289(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich326] = Field(
        None,
        description='<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',
    )


class ItemStyle227(HandleStyle1):
    pass


class Blur81(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label289] = Field(None, description='')
    itemStyle: Optional[ItemStyle227] = Field(None, description='')


class ItemStyle228(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName327(_StyleName3):
    pass


class Rich327(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName327] = Field(
        None, alias='<style_name>', description=''
    )


class Label290(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich327] = Field(
        None,
        description='<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',
    )


class ItemStyle229(HandleStyle1):
    pass


class _StyleName328(_StyleName3):
    pass


class Rich328(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName328] = Field(
        None, alias='<style_name>', description=''
    )


class Label291(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich328] = Field(
        None,
        description='<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',
    )


class Emphasis101(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle229] = Field(None, description='')
    label: Optional[Label291] = Field(None, description='')


class ItemStyle230(HandleStyle1):
    pass


class _StyleName329(_StyleName3):
    pass


class Rich329(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName329] = Field(
        None, alias='<style_name>', description=''
    )


class Label292(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich329] = Field(
        None,
        description='<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',
    )


class Blur82(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle230] = Field(None, description='')
    label: Optional[Label292] = Field(None, description='')


class Field015(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle228] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label290] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis101] = Field(None, description='')
    blur: Optional[Blur82] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle231(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName330(_StyleName3):
    pass


class Rich330(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName330] = Field(
        None, alias='<style_name>', description=''
    )


class Label293(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich330] = Field(
        None,
        description='<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',
    )


class ItemStyle232(HandleStyle1):
    pass


class _StyleName331(_StyleName3):
    pass


class Rich331(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName331] = Field(
        None, alias='<style_name>', description=''
    )


class Label294(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich331] = Field(
        None,
        description='<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',
    )


class Emphasis102(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle232] = Field(None, description='')
    label: Optional[Label294] = Field(None, description='')


class ItemStyle233(HandleStyle1):
    pass


class _StyleName332(_StyleName3):
    pass


class Rich332(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName332] = Field(
        None, alias='<style_name>', description=''
    )


class Label295(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich332] = Field(
        None,
        description='<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',
    )


class Blur83(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle233] = Field(None, description='')
    label: Optional[Label295] = Field(None, description='')


class Field115(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle231] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label293] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis102] = Field(None, description='')
    blur: Optional[Blur83] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data17(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-heatmap.markArea.data.0.x">x</a>, <a href="#series-heatmap.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field015] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field115] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea7(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label287] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle225] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis100] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur81] = Field(
        None,
        description='<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',
    )
    data: Optional[Data17] = Field(
        None,
        description='<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-heatmap.markArea.data.0.x">x</a>, <a href="#series-heatmap.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code 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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class TextStyle39(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip25(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle39] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series12(BaseModel):
    """
        <p><strong>heat map</strong></p>
    <p>Heat map mainly use colors to represent values, which must be used along with <a href="#visualMap">visualMap</a> component.</p>
    <p>It can be used in either <a href="#grid">rectangular coordinate</a> or <a href="#geo">geographic coordinate</a>. But the behaviour on them are quite different. Rectangular coordinate must have two catagories to use it.</p>
    <p>Here are the examples using it in rectangular coordinate and geographic coordinate:</p>
    <p><strong>rectangular coordinate: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=heatmap-cartesian&edit=1&reset=1" width="600" height="400"></iframe>


    """

    type: Optional[str] = Field('heatmap', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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',
    )
    coordinateSystem: Optional[str] = Field(
        'cartesian2d',
        description='<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-heatmap.xAxisIndex">xAxisIndex</a> and <a href="#series-heatmap.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href="#series-heatmap.geoIndex">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    geoIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#geo">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n',
    )
    calendarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#calendar">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n',
    )
    pointSize: Optional[float] = Field(
        20,
        description='<p>Point size of each data point. It is valid with <a href="#series-heatmap.coordinateSystem">coordinateSystem</a> of &#39;geo&#39; value.</p>\n',
    )
    blurSize: Optional[float] = Field(
        20,
        description='<p>Blur size of each data point. It is valid with <a href="#series-heatmap.coordinateSystem">coordinateSystem</a> of &#39;geo&#39; value.</p>\n',
    )
    minOpacity: Optional[float] = Field(
        0,
        description='<p>Minimum opacity. It is valid with <a href="#series-heatmap.coordinateSystem">coordinateSystem</a> of &#39;geo&#39; value.</p>\n',
    )
    maxOpacity: Optional[float] = Field(
        1,
        description='<p>Maximum opacity. It is valid with <a href="#series-heatmap.coordinateSystem">coordinateSystem</a> of &#39;geo&#39; value.</p>\n',
    )
    progressive: Optional[float] = Field(
        400,
        description='<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: Optional[float] = Field(
        3000,
        description='<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n',
    )
    label: Optional[Label267] = Field(
        None,
        description='<p>Work for <a href="#series-heatmap.coordinateSystem">coordinateSystem</a>: &#39;cartesian2d&#39;.</p>\n',
    )
    labelLayout: Optional[LabelLayout9] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle214] = Field(
        None,
        description='<p>Work for <a href="#series-heatmap.coordinateSystem">coordinateSystem</a>: &#39;cartesian2d&#39;.</p>\n',
    )
    emphasis: Optional[Emphasis93] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    universalTransition: Optional[UniversalTransition7] = Field(
        None,
        description='<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',
    )
    blur: Optional[Blur76] = Field(
        None,
        description='<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-heatmap.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select27] = Field(
        None,
        description='<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-heatmap.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    seriesLayoutBy: Optional[str] = Field(
        'column',
        description='<p>When <a href="#dataset">dataset</a> is used, <code class="codespan">seriesLayoutBy</code> specifies whether the column or the row of <code class="codespan">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class="codespan">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：the rows of <code class="codespan">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href="http://localhost/echarts-website/examples/en/editor.html?c=dataset-series-layout-by" target="_blank">example</a>.</p>\n',
    )
    datasetIndex: Optional[float] = Field(
        0,
        description='<p>If <a href="#series.data">series.data</a> is not specified, and <a href="#dataset">dataset</a> exists, the series will use <code class="codespan">dataset</code>. <code class="codespan">datasetIndex</code> specifies which dataset will be used.</p>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum25]] = Field(
        None,
        description='<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class="codespan">data</code> specified in series, and there is <a href="#dataset">dataset</a> in option, series will use the first <a href="#dataset">dataset</a> as its datasource. If <code class="codespan">data</code> has been specified, <a href="#dataset">dataset</a> will not used.</p>\n<p><code class="codespan">series.datasetIndex</code> can be used to specify other <a href="#dataset">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class="lang-ts">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href="#grid">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#xAxis">xAxis</a> and <a href="#yAxis">yAxis</a> respectively.</li>\n<li>In <a href="#polar">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#radiusAxis">radiusAxis</a> and <a href="#angleAxis">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href="#visualMap">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href="#series.symbolSize">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href="#tooltip.formatter">tooltip.formatter</a> or <a href="#series.label.formatter">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class="codespan">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class="lang-ts">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href="#xAxis.type">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class="codespan">&#39;value&#39;</code> or <code class="codespan">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class="codespan">number</code> (like <code class="codespan">12</code>) (can also be a number in a <code class="codespan">string</code> format, like <code class="codespan">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class="codespan">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class="codespan">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class="lang-ts">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-punchCard" target="_blank">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class="codespan">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class="codespan">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15" target="_blank">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href="https://momentjs.com/" target="_blank">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class="codespan">&#39;2012-03&#39;</code>, <code class="codespan">&#39;2012-03-01&#39;</code>, <code class="codespan">&#39;2012-03-01 05&#39;</code>, <code class="codespan">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class="codespan">&quot;T&quot;</code> or a space: <code class="codespan">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class="codespan">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class="codespan">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class="codespan">&#39;2012&#39;</code>, <code class="codespan">&#39;2012-3-1&#39;</code>, <code class="codespan">&#39;2012/3/1&#39;</code>, <code class="codespan">&#39;2012/03/01&#39;</code>,\n<code class="codespan">&#39;2009/6/12 2:00&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href="https://dygraphs.com/date-formats.html" target="_blank">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class="codespan">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> and <code class="codespan">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class="codespan">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href="https://momentjs.com/" target="_blank">moment</a>), or use <code class="codespan">echarts.number.parseDate</code>, or check <a href="https://dygraphs.com/date-formats.html" target="_blank">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class="codespan">value</code> reprensent real value. For example:</p>\n<pre><code class="lang-ts">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class="codespan">&#39;-&#39;</code> or <code class="codespan">null</code> or <code class="codespan">undefined</code> or <code class="codespan">NaN</code> can be used to describe that a data item does not exist (ps：<em>not exist</em> does not means its value is <code class="codespan">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n',
    )
    markPoint: Optional[MarkPoint7] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine7] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea7] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in heatmap.</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in heatmap, 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    tooltip: Optional[Tooltip25] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class Projection1(Projection):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.3.0</code></p>
    </blockquote>
    <p>For custom map projection, at least two methods <code class="codespan">project</code>, <code class="codespan">unproject</code> should be provided to calculate the coordinates after projection and before projection respectively.</p>
    <p>For example, for the Mercator projection.</p>
    <pre><code class="lang-ts">series: {
        type: &#39;map&#39;,
        projection: {
            project: (point) =&gt; [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],
            unproject: (point) =&gt; [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]
        }
    }
    </code></pre>
    <p>In addition to our own implementation of the projection formula, we can also use exists projection implementations provided by third-party libraries such as <a href="https://github.com/d3/d3-geo" target="_blank">d3-geo</a>.</p>
    <pre><code class="lang-ts">const projection = d3.geoConicEqualArea();
    // ...
    series: {
        type: &#39;map&#39;,
        projection: {
            project: (point) =&gt; projection(point),
            unproject: (point) =&gt; projection.invert(point)
        }
    }

    </code></pre>
    <p>Note: Custom projections are only useful when using <code class="codespan">GeoJSON</code> as a data source.</p>

    """

    pass


class ScaleLimit1(ScaleLimit):
    """
    <p>Limit of scaling, with <code class="codespan">min</code> and <code class="codespan">max</code>. <code class="codespan">1</code> by default.</p>

    """

    pass


class _StyleName333(_StyleName3):
    pass


class Rich333(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName333] = Field(
        None, alias='<style_name>', description=''
    )


class Label296(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich333] = Field(
        None,
        description='<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',
    )


class ItemStyle234(ItemStyle2):
    """
    <p>Graphic style of Map Area Border, <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    pass


class _StyleName334(_StyleName3):
    pass


class Rich334(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName334] = Field(
        None, alias='<style_name>', description=''
    )


class Label297(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich334] = Field(
        None,
        description='<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',
    )


class ItemStyle235(ItemStyle3):
    pass


class Emphasis103(BaseModel):
    """
    <p>Map area style in highlighted state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label297] = Field(None, description='')
    itemStyle: Optional[ItemStyle235] = Field(None, description='')


class _StyleName335(_StyleName3):
    pass


class Rich335(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName335] = Field(
        None, alias='<style_name>', description=''
    )


class Label298(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich335] = Field(
        None,
        description='<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',
    )


class ItemStyle236(ItemStyle3):
    pass


class Select28(BaseModel):
    """
    <p>Map area style in selected state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label298] = Field(None, description='')
    itemStyle: Optional[ItemStyle236] = Field(None, description='')


class LabelLayout10(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class LineStyle205(LineStyle51):
    pass


class LabelLine59(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle205] = Field(None, description='')


class ItemStyle237(BaseModel):
    """
    <p>Style of item polygon</p>

    """

    areaColor: Optional[Any] = Field(
        None,
        description='<p>Color of the area.</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',
    )
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName336(_StyleName3):
    pass


class Rich336(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName336] = Field(
        None, alias='<style_name>', description=''
    )


class Label299(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'bottom',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich336] = Field(
        None,
        description='<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',
    )


class LineStyle206(LineStyle51):
    pass


class LabelLine60(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle206] = Field(None, description='')


class ItemStyle238(BaseModel):
    areaColor: Optional[Any] = Field(
        None,
        description='<p>The color of the map area.</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',
    )
    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Since 5.2.0, it can be 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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName337(_StyleName3):
    pass


class Rich337(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName337] = Field(
        None, alias='<style_name>', description=''
    )


class Label300(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich337] = Field(
        None,
        description='<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',
    )


class LineStyle207(LineStyle51):
    pass


class LabelLine61(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle207] = Field(None, description='')


class Emphasis104(BaseModel):
    """
    <p>Emphasis state of specified region.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle238] = Field(None, description='')
    label: Optional[Label300] = Field(None, description='')
    labelLine: Optional[LabelLine61] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )


class ItemStyle239(ItemStyle7):
    pass


class _StyleName338(_StyleName3):
    pass


class Rich338(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName338] = Field(
        None, alias='<style_name>', description=''
    )


class Label301(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich338] = Field(
        None,
        description='<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',
    )


class LineStyle208(LineStyle51):
    pass


class LabelLine62(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle208] = Field(None, description='')


class Select29(BaseModel):
    """
    <p>Select state of polygon.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle239] = Field(None, description='')
    label: Optional[Label301] = Field(None, description='')
    labelLine: Optional[LabelLine62] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )


class TextStyle40(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip26(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle40] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum27(BaseModel):
    name: Optional[str] = Field(
        None,
        description='<p>The name of the map area where the data belongs to, such as <code class="codespan">&#39;China&#39;</code> or <code class="codespan">&#39;United Kingdom&#39;</code> .</p>\n',
    )
    value: Optional[float] = Field(
        None, description='<p>The numerical value of this area.</p>\n'
    )
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    selected: Optional[bool] = Field(
        False, description='<p>Whether the are selected.</p>\n'
    )
    itemStyle: Optional[ItemStyle237] = Field(
        None, description='<p>Style of item polygon</p>\n'
    )
    label: Optional[Label299] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine60] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    emphasis: Optional[Emphasis104] = Field(
        None, description='<p>Emphasis state of specified region.</p>\n'
    )
    select: Optional[Select29] = Field(
        None, description='<p>Select state of polygon.</p>\n'
    )
    tooltip: Optional[Tooltip26] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class _StyleName339(_StyleName3):
    pass


class Rich339(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName339] = Field(
        None, alias='<style_name>', description=''
    )


class Label302(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich339] = Field(
        None,
        description='<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',
    )


class ItemStyle240(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName340(_StyleName3):
    pass


class Rich340(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName340] = Field(
        None, alias='<style_name>', description=''
    )


class Label303(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich340] = Field(
        None,
        description='<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',
    )


class ItemStyle241(HandleStyle1):
    pass


class Emphasis105(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label303] = Field(None, description='')
    itemStyle: Optional[ItemStyle241] = Field(None, description='')


class _StyleName341(_StyleName3):
    pass


class Rich341(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName341] = Field(
        None, alias='<style_name>', description=''
    )


class Label304(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich341] = Field(
        None,
        description='<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',
    )


class ItemStyle242(HandleStyle1):
    pass


class Blur84(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label304] = Field(None, description='')
    itemStyle: Optional[ItemStyle242] = Field(None, description='')


class ItemStyle243(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName342(_StyleName3):
    pass


class Rich342(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName342] = Field(
        None, alias='<style_name>', description=''
    )


class Label305(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich342] = Field(
        None,
        description='<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',
    )


class _StyleName343(_StyleName3):
    pass


class Rich343(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName343] = Field(
        None, alias='<style_name>', description=''
    )


class Label306(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich343] = Field(
        None,
        description='<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',
    )


class ItemStyle244(HandleStyle1):
    pass


class Emphasis106(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label306] = Field(None, description='')
    itemStyle: Optional[ItemStyle244] = Field(None, description='')


class Datum28(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Available when using <a href="#series-map.markPoint.data.type">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class="codespan">0</code> (xAxis, radiusAxis), <code class="codespan">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-map.markPoint.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle243] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label305] = Field(None, description='')
    emphasis: Optional[Emphasis106] = Field(None, description='')


class MarkPoint8(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-map.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-map.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-map.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label302] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle240] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis105] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur84] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum28]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-map.markPoint.data.x">x</a>, <a href="#series-map.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li>Assign coordinate position with <a href="#series-map.markPoint.data.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</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        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName344(_StyleName3):
    pass


class Rich344(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName344] = Field(
        None, alias='<style_name>', description=''
    )


class Label307(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich344] = Field(
        None,
        description='<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',
    )


class LineStyle209(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName345(_StyleName3):
    pass


class Rich345(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName345] = Field(
        None, alias='<style_name>', description=''
    )


class Label308(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich345] = Field(
        None,
        description='<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',
    )


class LineStyle210(LineStyle51):
    pass


class Emphasis107(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label308] = Field(None, description='')
    lineStyle: Optional[LineStyle210] = Field(None, description='')


class _StyleName346(_StyleName3):
    pass


class Rich346(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName346] = Field(
        None, alias='<style_name>', description=''
    )


class Label309(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich346] = Field(
        None,
        description='<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',
    )


class LineStyle211(LineStyle51):
    pass


class Blur85(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label309] = Field(None, description='')
    lineStyle: Optional[LineStyle211] = Field(None, description='')


class LineStyle212(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName347(_StyleName3):
    pass


class Rich347(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName347] = Field(
        None, alias='<style_name>', description=''
    )


class Label310(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich347] = Field(
        None,
        description='<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',
    )


class LineStyle213(LineStyle60):
    pass


class _StyleName348(_StyleName3):
    pass


class Rich348(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName348] = Field(
        None, alias='<style_name>', description=''
    )


class Label311(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich348] = Field(
        None,
        description='<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',
    )


class Emphasis108(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle213] = Field(None, description='')
    label: Optional[Label311] = Field(None, description='')


class LineStyle214(LineStyle60):
    pass


class _StyleName349(_StyleName3):
    pass


class Rich349(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName349] = Field(
        None, alias='<style_name>', description=''
    )


class Label312(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich349] = Field(
        None,
        description='<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',
    )


class Blur86(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle214] = Field(None, description='')
    label: Optional[Label312] = Field(None, description='')


class Field016(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-map.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-map.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle212] = Field(
        None,
        description='<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',
    )
    label: Optional[Label310] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis108] = Field(None, description='')
    blur: Optional[Blur86] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle215(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName350(_StyleName3):
    pass


class Rich350(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName350] = Field(
        None, alias='<style_name>', description=''
    )


class Label313(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich350] = Field(
        None,
        description='<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',
    )


class LineStyle216(LineStyle60):
    pass


class _StyleName351(_StyleName3):
    pass


class Rich351(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName351] = Field(
        None, alias='<style_name>', description=''
    )


class Label314(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich351] = Field(
        None,
        description='<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',
    )


class Emphasis109(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle216] = Field(None, description='')
    label: Optional[Label314] = Field(None, description='')


class LineStyle217(LineStyle60):
    pass


class _StyleName352(_StyleName3):
    pass


class Rich352(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName352] = Field(
        None, alias='<style_name>', description=''
    )


class Label315(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich352] = Field(
        None,
        description='<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',
    )


class Blur87(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle217] = Field(None, description='')
    label: Optional[Label315] = Field(None, description='')


class Field116(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-map.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-map.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle215] = Field(
        None,
        description='<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',
    )
    label: Optional[Label313] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis109] = Field(None, description='')
    blur: Optional[Blur87] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data18(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-map.markLine.data.0.x">x</a>, <a href="#series-map.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <ol start="2">
    <li>Assign coordinate position with <a href="#series-map.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Markline between two points&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [{
            // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
            yAxis: &#39;max&#39;,
            x: &#39;90%&#39;
        }, {
            type: &#39;max&#39;
        }],
    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field016] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field116] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine8(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-map.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label307] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle209] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis107] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur85] = Field(
        None,
        description='<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',
    )
    data: Optional[Data18] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-map.markLine.data.0.x">x</a>, <a href="#series-map.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li>Assign coordinate position with <a href="#series-map.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</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;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName353(_StyleName3):
    pass


class Rich353(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName353] = Field(
        None, alias='<style_name>', description=''
    )


class Label316(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich353] = Field(
        None,
        description='<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',
    )


class ItemStyle245(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName354(_StyleName3):
    pass


class Rich354(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName354] = Field(
        None, alias='<style_name>', description=''
    )


class Label317(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich354] = Field(
        None,
        description='<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',
    )


class ItemStyle246(HandleStyle1):
    pass


class Emphasis110(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label317] = Field(None, description='')
    itemStyle: Optional[ItemStyle246] = Field(None, description='')


class _StyleName355(_StyleName3):
    pass


class Rich355(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName355] = Field(
        None, alias='<style_name>', description=''
    )


class Label318(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich355] = Field(
        None,
        description='<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',
    )


class ItemStyle247(HandleStyle1):
    pass


class Blur88(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label318] = Field(None, description='')
    itemStyle: Optional[ItemStyle247] = Field(None, description='')


class ItemStyle248(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName356(_StyleName3):
    pass


class Rich356(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName356] = Field(
        None, alias='<style_name>', description=''
    )


class Label319(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich356] = Field(
        None,
        description='<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',
    )


class ItemStyle249(HandleStyle1):
    pass


class _StyleName357(_StyleName3):
    pass


class Rich357(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName357] = Field(
        None, alias='<style_name>', description=''
    )


class Label320(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich357] = Field(
        None,
        description='<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',
    )


class Emphasis111(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle249] = Field(None, description='')
    label: Optional[Label320] = Field(None, description='')


class ItemStyle250(HandleStyle1):
    pass


class _StyleName358(_StyleName3):
    pass


class Rich358(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName358] = Field(
        None, alias='<style_name>', description=''
    )


class Label321(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich358] = Field(
        None,
        description='<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',
    )


class Blur89(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle250] = Field(None, description='')
    label: Optional[Label321] = Field(None, description='')


class Field017(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-map.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-map.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle248] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label319] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis111] = Field(None, description='')
    blur: Optional[Blur89] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle251(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName359(_StyleName3):
    pass


class Rich359(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName359] = Field(
        None, alias='<style_name>', description=''
    )


class Label322(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich359] = Field(
        None,
        description='<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',
    )


class ItemStyle252(HandleStyle1):
    pass


class _StyleName360(_StyleName3):
    pass


class Rich360(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName360] = Field(
        None, alias='<style_name>', description=''
    )


class Label323(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich360] = Field(
        None,
        description='<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',
    )


class Emphasis112(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle252] = Field(None, description='')
    label: Optional[Label323] = Field(None, description='')


class ItemStyle253(HandleStyle1):
    pass


class _StyleName361(_StyleName3):
    pass


class Rich361(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName361] = Field(
        None, alias='<style_name>', description=''
    )


class Label324(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich361] = Field(
        None,
        description='<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',
    )


class Blur90(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle253] = Field(None, description='')
    label: Optional[Label324] = Field(None, description='')


class Field117(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-map.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-map.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle251] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label322] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis112] = Field(None, description='')
    blur: Optional[Blur90] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data19(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-map.markArea.data.0.x">x</a>, <a href="#series-map.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <ol start="2">
    <li>Specify the coordinate in data coordinate system (i.e., cartesian) using
    <a href="#series-map.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [


        [
            {
                name: &#39;Mark area between two points in data coordiantes&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [
            {
                name: &#39;From 60 to 80&#39;,
                yAxis: 60
            },
            {
                yAxis: 80
            }
        ], [
            {
                name: &#39;Mark area covers all data&#39;
                coord: [&#39;min&#39;, &#39;min&#39;]
            },
            {
                coord: [&#39;max&#39;, &#39;max&#39;]
            }
        ],
    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field017] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field117] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea8(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label316] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle245] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis110] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur88] = Field(
        None,
        description='<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',
    )
    data: Optional[Data19] = Field(
        None,
        description='<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-map.markArea.data.0.x">x</a>, <a href="#series-map.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>\n</ol>\n<ol start="2">\n<li>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href="#series-map.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#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        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition8(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class TextStyle41(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip27(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle41] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series13(BaseModel):
    """
        <p><strong>Map.</strong></p>
    <p>Map is mainly used in the visualization of geographic area data, which can be used with <a href="#visualMap">visualMap</a> component to visualize the datas such as population distribution density in diffrent areas.</p>
    <p>Series of same <a href="#series-map.map">map type</a> will show in one map. At this point, the configuration of the first series will be used for the map configuration.</p>

    """

    type: Optional[str] = Field('map', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    map: Optional[str] = Field(
        '',
        description='<p>Map name registered in <a href="api.html#echarts.registerMap" target="_blank">registerMap</a>.</p>\n<p><strong>Use geoJSON</strong></p>\n<pre><code class="lang-ts">$.get(&#39;map/china_geo.json&#39;, function (geoJson) {\n    echarts.registerMap(&#39;china&#39;, {geoJSON: geoJson});\n    var chart = echarts.init(document.getElementById(&#39;main&#39;));\n    chart.setOption({\n        series: [{\n            type: &#39;map&#39;,\n            map: &#39;china&#39;,\n            ...\n        }]\n    });\n});\n</code></pre>\n<p>See also <a href="http://localhost/echarts-website/examples/en/editor.html?c=map-usa" target="_blank">USA Population Estimates</a>.</p>\n<p>The demo above shows that ECharts can uses <a href="http://geojson.org/" target="_blank">geoJSON</a> format as map outline. You can use third-party <a href="http://geojson.org/" target="_blank">geoJSON</a> data (like <a href="https://github.com/echarts-maps" target="_blank">maps</a>) and register them into ECharts.</p>\n<p><strong>Use SVG</strong></p>\n<pre><code class="lang-ts">$.get(&#39;map/topographic_map.svg&#39;, function (svg) {\n    echarts.registerMap(&#39;topo&#39;, {svg: svg});\n    var chart = echarts.init(document.getElementById(&#39;main&#39;));\n    chart.setOption({\n        series: [{\n            type: &#39;map&#39;,\n            map: &#39;topo&#39;,\n            ...\n        }]\n    });\n});\n</code></pre>\n<p>See also <a href="http://localhost/echarts-website/examples/en/editor.html?c=geo-beef-cuts" target="_blank">Beef Cuts</a>.</p>\n<p>The demo above shows that SVG format can be used in ECharts. See more info in <a href="tutorial.html#SVG%20Base%20Map%20in%20Geo%20Coords%20and%20Map%20Series" target="_blank">SVG Base Map</a>.</p>\n',
    )
    roam: Optional[Union[bool, str]] = Field(
        False,
        description='\n\n<p>Whether to enable mouse zooming and translating. <code class="codespan">false</code> by default. If either zooming or translating is wanted, it can be set to <code class="codespan">&#39;scale&#39;</code> or <code class="codespan">&#39;move&#39;</code>. Otherwise, set it to be <code class="codespan">true</code> to enable both.</p>\n',
    )
    projection: Optional[Projection1] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.3.0</code></p>\n</blockquote>\n<p>For custom map projection, at least two methods <code class="codespan">project</code>, <code class="codespan">unproject</code> should be provided to calculate the coordinates after projection and before projection respectively.</p>\n<p>For example, for the Mercator projection.</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;map&#39;,\n    projection: {\n        project: (point) =&gt; [point[0] / 180 * Math.PI, -Math.log(Math.tan((Math.PI / 2 + point[1] / 180 * Math.PI) / 2))],\n        unproject: (point) =&gt; [point[0] * 180 / Math.PI, 2 * 180 / Math.PI * Math.atan(Math.exp(point[1])) - 90]\n    }\n}\n</code></pre>\n<p>In addition to our own implementation of the projection formula, we can also use exists projection implementations provided by third-party libraries such as <a href="https://github.com/d3/d3-geo" target="_blank">d3-geo</a>.</p>\n<pre><code class="lang-ts">const projection = d3.geoConicEqualArea();\n// ...\nseries: {\n    type: &#39;map&#39;,\n    projection: {\n        project: (point) =&gt; projection(point),\n        unproject: (point) =&gt; projection.invert(point)\n    }\n}\n\n</code></pre>\n<p>Note: Custom projections are only useful when using <code class="codespan">GeoJSON</code> as a data source.</p>\n',
    )
    center: Optional[Any] = Field(
        None,
        description='<p>Center of current view-port. It can be an arrary containing two <code class="codespan">number</code>s in pixels or <code class="codespan">string</code>s in percentage relative to the container width/height.\n<code class="codespan">string</code> is supported from version <code class="codespan">5.3.3</code>.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">center: [115.97, &#39;30%&#39;]\n</code></pre>\n',
    )
    aspectScale: Optional[float] = Field(
        0.75,
        description='<p>Used to scale aspect of geo. Will be ignored if <code class="codespan">projection</code> is set.</p>\n<p>The final aspect is calculated by: <code class="codespan">geoBoundingRect.width / geoBoundingRect.height * aspectScale</code>.</p>\n',
    )
    boundingCoords: Optional[Any] = Field(
        None,
        description='<p>Two dimension array. Define coord of left-top, right-bottom in layout box.</p>\n<pre><code class="lang-ts">// A complete world map\nmap: &#39;world&#39;,\nleft: 0, top: 0, right: 0, bottom: 0,\nboundingCoords: [\n    // [lng, lat] of left-top corner\n    [-180, 90],\n    // [lng, lat] of right-bottom corner\n    [180, -90]\n],\n</code></pre>\n',
    )
    zoom: Optional[float] = Field(
        1, description='<p>Zoom rate of current view-port.</p>\n'
    )
    scaleLimit: Optional[ScaleLimit1] = Field(
        None,
        description='<p>Limit of scaling, with <code class="codespan">min</code> and <code class="codespan">max</code>. <code class="codespan">1</code> by default.</p>\n',
    )
    nameMap: Optional[Any] = Field(
        None,
        description='<p>Name mapping for customized areas. For example:</p>\n<pre><code class="lang-ts">{\n    &#39;China&#39; : &#39;中国&#39;\n}\n</code></pre>\n',
    )
    nameProperty: Optional[str] = Field(
        'name',
        description='<blockquote>\n<p>Since <code class="codespan">v4.8.0</code></p>\n</blockquote>\n<p>customized property key for GeoJSON feature. By default, &#39;name&#39; is used as primary key to identify GeoJSON feature.\nFor example:</p>\n<pre><code class="lang-ts">{\n    nameProperty: &#39;NAME&#39;, // key to connect following data point to GeoJSON region {&quot;type&quot;:&quot;Feature&quot;,&quot;id&quot;:&quot;01&quot;,&quot;properties&quot;:{&quot;NAME&quot;:&quot;Alabama&quot;}, &quot;geometry&quot;: { ... }}\n    data:[\n        {name: &#39;Alabama&#39;, value: 4822023},\n        {name: &#39;Alaska&#39;, value: 731449},\n    ]\n}\n</code></pre>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<p>Selected mode decides whether multiple selecting is supported. By default, <code class="codespan">false</code> is used for disabling selection. Its value can also be <code class="codespan">&#39;single&#39;</code> for selecting single area, or <code class="codespan">&#39;multiple&#39;</code> for selecting multiple areas.</p>\n',
    )
    label: Optional[Label296] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    itemStyle: Optional[ItemStyle234] = Field(
        None,
        description='<p>Graphic style of Map Area Border, <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    emphasis: Optional[Emphasis103] = Field(
        None, description='<p>Map area style in highlighted state.</p>\n'
    )
    select: Optional[Select28] = Field(
        None, description='<p>Map area style in selected state.</p>\n'
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    layoutCenter: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">layoutCenter</code> and <code class="codespan">layoutSize</code> provides layout strategy other than <code class="codespan">left/right/top/bottom/width/height</code>.</p>\n<p>When using <code class="codespan">left/right/top/bottom/width/height</code>, it is hard to put the map inside a box area with a fixed width-height ratio. In this case, <code class="codespan">layoutCenter</code> attribute can be used to define the center position of map, and <code class="codespan">layoutSize</code> can be used to define the size of map. For example:</p>\n<pre><code class="lang-ts">layoutCenter: [&#39;30%&#39;, &#39;30%&#39;],\n// If width-height ratio is larger than 1, then width is set to be 100.\n// Otherwise, height is set to be 100.\n// This makes sure that it will not exceed the area of 100x100\nlayoutSize: 100\n</code></pre>\n<p>After setting these two values, <code class="codespan">left/right/top/bottom/width/height</code> becomes invalid.</p>\n',
    )
    layoutSize: Optional[Union[float, str]] = Field(
        None,
        description='<p>Size of map, see <code class="codespan">layoutCenter</code> for more information. Percentage relative to screen width, and absolute pixel values are supported.</p>\n',
    )
    geoIndex: Optional[float] = Field(
        None,
        description='<p>In default case, map series create exclusive <code class="codespan">geo</code> component for themselves. But <code class="codespan">geoIndex</code> can be used to specify an outer <a href="#geo">geo component</a>, which can be shared with other series like <a href="#series-pie">pie</a>. Moreover, the region color of the outer <a href="#geo">geo component</a> can be controlled by the map series (via <a href="#visualMap">visualMap</a>).</p>\n<p>When <code class="codespan">geoIndex</code> specified, <a href="#series-map.map">series-map.map</a> other style configurations like <a href="#series-map.itemStyle">series-map.itemStyle</a> will not work, but corresponding configurations in <a href="#geo">geo component</a> will be used.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=geo-map-scatter&reset=1&edit=1" width="600" height="400"></iframe>\n\n',
    )
    mapValueCalculation: Optional[str] = Field(
        'sum',
        description='<p>Value of multiple series with the same <a href="#series-map.map">map type</a> can use this option to get a statistical value.</p>\n<p>Supported statistical methods:</p>\n<ul>\n<li><code class="codespan">&#39;sum&#39;</code></li>\n<li><code class="codespan">&#39;average&#39;</code></li>\n<li><code class="codespan">&#39;max&#39;</code></li>\n<li><code class="codespan">&#39;min&#39;</code></li>\n</ul>\n',
    )
    showLegendSymbol: Optional[bool] = Field(
        None,
        description='<p>Show the symbol in related area (dot of series symbol). Available when <a href="#legend">legend</a> component exists.</p>\n',
    )
    seriesLayoutBy: Optional[str] = Field(
        'column',
        description='<p>When <a href="#dataset">dataset</a> is used, <code class="codespan">seriesLayoutBy</code> specifies whether the column or the row of <code class="codespan">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class="codespan">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：the rows of <code class="codespan">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href="http://localhost/echarts-website/examples/en/editor.html?c=dataset-series-layout-by" target="_blank">example</a>.</p>\n',
    )
    datasetIndex: Optional[float] = Field(
        0,
        description='<p>If <a href="#series.data">series.data</a> is not specified, and <a href="#dataset">dataset</a> exists, the series will use <code class="codespan">dataset</code>. <code class="codespan">datasetIndex</code> specifies which dataset will be used.</p>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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',
    )
    labelLayout: Optional[LabelLayout10] = Field(
        None,
        description='<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',
    )
    labelLine: Optional[LabelLine59] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    data: Optional[List[Datum27]] = Field(
        None,
        description='<p>Data array of map series, which can be a single data value, like:</p>\n<pre><code class="lang-ts">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href="#visualMap">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class="lang-ts">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href="#visualMap">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class="lang-ts">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class="lang-ts">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n',
    )
    markPoint: Optional[MarkPoint8] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine8] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea8] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    universalTransition: Optional[UniversalTransition8] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip27] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class LineStyle218(BaseModel):
    """
    <p>Line style.</p>

    """

    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(2, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.45,
        description='\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',
    )


class LineStyle219(LineStyle218):
    pass


class Emphasis113(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle219] = Field(None, description='')


class LineStyle220(LineStyle218):
    pass


class Emphasis114(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle220] = Field(None, description='')


class Datum29(BaseModel):
    name: Optional[str] = Field(None, description='<p>The name of a data item.</p>\n')
    value: Optional[Any] = Field(None, description='<p>The value of a data item.</p>\n')
    lineStyle: Optional[Any] = Field(None, description='<p>Line style.</p>\n')
    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(2, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.45,
        description='\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',
    )
    emphasis: Optional[Emphasis114] = Field(None, description='')


class Series14(BaseModel):
    """
        <p>The series in parallel coordinate system.</p>
    <p><strong>Introduction about Parallel coordinates</strong></p>
    <p><a href="https://en.wikipedia.org/wiki/Parallel_coordinates" target="_blank">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>
    <p>For example, <a href="#series-parallel.data">series-parallel.data</a> is the following data:</p>
    <pre><code class="lang-javascript">[
        [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],
        [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],
        [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],
        [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],
        { // Data item can also be an Object, so that perticular settings of its line can be set here.
            value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]
            lineStyle: {...},
        }
        ...
    ]
    </code></pre>
    <p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>
    <p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/parallel-all&edit=1&reset=1" width="600" height="400"></iframe>



    <p><strong>Brief about Configuration</strong></p>
    <p>Basic configuration parallel coordinates is shown as follow:</p>
    <pre><code class="lang-javascript">option = {
        parallelAxis: [                     // Definitions of axes.
            {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.
            {dim: 1, name: schema[1].text},
            {dim: 2, name: schema[2].text},
            {dim: 3, name: schema[3].text},
            {dim: 4, name: schema[4].text},
            {dim: 5, name: schema[5].text},
            {dim: 6, name: schema[6].text},
            {dim: 7, name: schema[7].text,
                type: &#39;category&#39;,           // Also supports category data.
                data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]
            }
        ],
        parallel: {                         // Definition of a parallel coordinate system.
            left: &#39;5%&#39;,                     // Location of parallel coordinate system.
            right: &#39;13%&#39;,
            bottom: &#39;10%&#39;,
            top: &#39;20%&#39;,
            parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.
                type: &#39;value&#39;,
                nameLocation: &#39;end&#39;,
                nameGap: 20
            }
        },
        series: [                           // Here the three series sharing the same parallel coordinate system.
            {
                name: &#39;Beijing&#39;,
                type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;
                data: [
                    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],
                    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],
                    ...
                ]
            },
            {
                name: &#39;Shanghai&#39;,
                type: &#39;parallel&#39;,
                data: [
                    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],
                    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],
                    ...
                ]
            },
            {
                name: &#39;Guangzhou&#39;,
                type: &#39;parallel&#39;,
                data: [
                    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],
                    [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],
                    ...
                ]
            }
        ]
    };
    </code></pre>
    <p>Three components are involved here: <a href="#parallel">parallel</a>, <a href="#parallelAxis">parallelAxis</a>, <a href="#series-parallel">series-parallel</a></p>
    <ul>
    <li><p><a href="#parallel">parallel</a></p>
    <p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>
    <p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>
    <p>  Position setting is also carried out here.</p>
    </li>
    <li><p><a href="#parallelAxis">parallelAxis</a></p>
    <p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>
    <p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>
    </li>
    <li><p><a href="#series-parallel">series-parallel</a></p>
    <p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>
    <p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>
    </li>
    </ul>
    <p><strong>Notes and Best Practices</strong></p>
    <p>When configuring multiple <a href="#parallelAxis">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> will be merged into <a href="#parallelAxis">parallelAxis</a> to generate the final axis configuration.</p>
    <p><strong>If data is too large and cause bad performance</strong></p>
    <p>It is suggested to set <a href="#series-parallel.lineStyle.width">series-parallel.lineStyle.width</a> to be <code class="codespan">0.5</code> (or less), which may improve performance significantly.</p>
    <p><strong>Display High-Dimension Data</strong></p>
    <p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>
    <p>In this case, you may use <a href="#parallel.axisExpandable">parallel.axisExpandable</a> to improve the display. See this example:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=map-parallel-prices&edit=1&reset=1" width="600" height="460"></iframe>












    """

    type: Optional[str] = Field('parallel', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    coordinateSystem: Optional[str] = Field(
        'parallel',
        description='<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class="codespan">&#39;parallel&#39;</code></p>\n<p>  Use parallel coordinates, with <a href="#series-parallel.parallelIndex">parallelIndex</a> to assign the corresponding parallel coordinate components.</p>\n</li>\n</ul>\n',
    )
    parallelIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#parallel">parallel coordinates</a> to combine with, which is useful for multiple parallel axes in one chart.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    lineStyle: Optional[LineStyle218] = Field(None, description='<p>Line style.</p>\n')
    emphasis: Optional[Emphasis113] = Field(None, description='')
    inactiveOpacity: Optional[float] = Field(
        0.05,
        description='\n\n<p>When perform brush selection, the unselected lines will be set as this transparency rate (which could darken those lines).</p>\n',
    )
    activeOpacity: Optional[float] = Field(
        1,
        description='\n\n<p>When perform brush selection, the selected lines will be set as this transparency rate (which could highlight those lines).</p>\n',
    )
    realtime: Optional[bool] = Field(
        True, description='\n\n<p>Whether to update view in realtime.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    progressive: Optional[float] = Field(
        500,
        description='<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: Optional[float] = Field(
        3000,
        description='<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n',
    )
    progressiveChunkMode: Optional[str] = Field(
        'sequential',
        description='<p>Chunk approach, optional values:</p>\n<ul>\n<li><code class="codespan">&#39;sequential&#39;</code>: slice data by data index.</li>\n<li><code class="codespan">&#39;mod&#39;</code>: slice data by mod, which make the data items of each chunk coming from all over the data, bringing better visual effect while progressive rendering.</li>\n</ul>\n',
    )
    data: Optional[List[Datum29]] = Field(
        None,
        description='<p>For example, <a href="#series-parallel.data">series-parallel.data</a> is the following data:</p>\n<pre><code class="lang-javascript">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in parallel.</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in parallel, 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'linear',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class Effect(BaseModel):
    """
        <p>The setting about the special effects of lines.</p>
    <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>

    """

    show: Optional[bool] = Field(
        False, description='<p>Whether to show special effect.</p>\n'
    )
    period: Optional[float] = Field(
        4, description='<p>The duration of special effect, which unit is second.</p>\n'
    )
    delay: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Effect animation delay. Can be number or callback function.</p>\n',
    )
    constantSpeed: Optional[float] = Field(
        0,
        description='<p>If symbol movement of special effect has a constant speed, which unit is pixel per second. <a href="#series-lines.effect.period">period</a> will be ignored if <code class="codespan">constantSpeed</code> is larger than 0.</p>\n',
    )
    symbol: Optional[str] = Field(
        'circle',
        description='<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',
    )
    symbolSize: Optional[Union[Any, float]] = Field(
        3,
        description='<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',
    )
    color: Optional[Any] = Field(
        None,
        description='<p>The color of special effect symbol, which defaults to be same with <a href="#series-lines.lineStyle.color">lineStyle.color</a>.</p>\n',
    )
    trailLength: Optional[float] = Field(
        0.2,
        description='<p>The length of trail of special effect.  The values from 0 to 1 could be set. Trail would be longer as the the value becomes larger.</p>\n',
    )
    loop: Optional[bool] = Field(
        True, description='<p>Whether to loop the special effect animation.</p>\n'
    )


class LineStyle221(BaseModel):
    color: Optional[Any] = Field(
        'self-adaptive',
        description='\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',
    )
    width: Optional[float] = Field(0, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.5,
        description='\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',
    )
    curveness: Optional[float] = Field(
        0,
        description='<p>The curveness of edge. The values from 0 to 1 could be set. The curveness would be larger as the the value becomes larger.</p>\n',
    )


class _StyleName362(_StyleName):
    pass


class Rich362(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName362] = Field(
        None, alias='<style_name>', description=''
    )


class Label325(BaseModel):
    """
    <p>Label settings. Does not work when <a href="#series-lines.polyline">polyline</a> is <code class="codespan">true</code>.</p>

    """

    show: Optional[bool] = Field(False, description='<p>Whether to show label.</p>\n')
    position: Optional[str] = Field(
        'end',
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich362] = Field(
        None,
        description='<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',
    )


class LabelLayout11(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class LineStyle222(BaseModel):
    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(0, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class _StyleName363(_StyleName):
    pass


class Rich363(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName363] = Field(
        None, alias='<style_name>', description=''
    )


class Label326(BaseModel):
    show: Optional[bool] = Field(False, description='<p>Whether to show label.</p>\n')
    position: Optional[str] = Field(
        'end',
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich363] = Field(
        None,
        description='<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',
    )


class Emphasis115(BaseModel):
    """
    <p>Emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    lineStyle: Optional[LineStyle222] = Field(None, description='')
    label: Optional[Label326] = Field(None, description='')


class LineStyle223(LineStyle51):
    pass


class _StyleName364(_StyleName):
    pass


class Rich364(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName364] = Field(
        None, alias='<style_name>', description=''
    )


class Label327(BaseModel):
    show: Optional[bool] = Field(False, description='<p>Whether to show label.</p>\n')
    position: Optional[str] = Field(
        'end',
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich364] = Field(
        None,
        description='<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',
    )


class Blur91(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-lines.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    lineStyle: Optional[LineStyle223] = Field(None, description='')
    label: Optional[Label327] = Field(None, description='')


class LineStyle224(LineStyle51):
    pass


class _StyleName365(_StyleName):
    pass


class Rich365(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName365] = Field(
        None, alias='<style_name>', description=''
    )


class Label328(BaseModel):
    show: Optional[bool] = Field(False, description='<p>Whether to show label.</p>\n')
    position: Optional[str] = Field(
        'end',
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich365] = Field(
        None,
        description='<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',
    )


class Select30(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-lines.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle224] = Field(None, description='')
    label: Optional[Label328] = Field(None, description='')


class LineStyle225(LineStyle60):
    """
    <p>The line style of this data item.</p>

    """

    pass


class _StyleName366(_StyleName):
    pass


class Rich366(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName366] = Field(
        None, alias='<style_name>', description=''
    )


class Label329(BaseModel):
    """
    <p>Label of a single line. Available when <a href="#series-lines.polyline">polyline</a> is not <code class="codespan">true</code>.</p>

    """

    show: Optional[bool] = Field(False, description='<p>Whether to show label.</p>\n')
    position: Optional[str] = Field(
        'end',
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich366] = Field(
        None,
        description='<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',
    )


class LineStyle226(LineStyle222):
    pass


class _StyleName367(_StyleName):
    pass


class Rich367(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName367] = Field(
        None, alias='<style_name>', description=''
    )


class Label330(BaseModel):
    show: Optional[bool] = Field(False, description='<p>Whether to show label.</p>\n')
    position: Optional[str] = Field(
        'end',
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich367] = Field(
        None,
        description='<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',
    )


class Emphasis116(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle226] = Field(None, description='')
    label: Optional[Label330] = Field(None, description='')


class LineStyle227(LineStyle51):
    pass


class _StyleName368(_StyleName):
    pass


class Rich368(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName368] = Field(
        None, alias='<style_name>', description=''
    )


class Label331(BaseModel):
    show: Optional[bool] = Field(False, description='<p>Whether to show label.</p>\n')
    position: Optional[str] = Field(
        'end',
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich368] = Field(
        None,
        description='<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',
    )


class Blur92(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle227] = Field(None, description='')
    label: Optional[Label331] = Field(None, description='')


class LineStyle228(LineStyle51):
    pass


class _StyleName369(_StyleName):
    pass


class Rich369(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName369] = Field(
        None, alias='<style_name>', description=''
    )


class Label332(BaseModel):
    show: Optional[bool] = Field(False, description='<p>Whether to show label.</p>\n')
    position: Optional[str] = Field(
        'end',
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich369] = Field(
        None,
        description='<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',
    )


class Select31(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle228] = Field(None, description='')
    label: Optional[Label332] = Field(None, description='')


class Datum30(BaseModel):
    name: Optional[str] = Field(None, description='<p>the name of data.</p>\n')
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    coords: Optional[Any] = Field(
        None,
        description='<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',
    )
    lineStyle: Optional[LineStyle225] = Field(
        None, description='<p>The line style of this data item.</p>\n'
    )
    label: Optional[Label329] = Field(
        None,
        description='<p>Label of a single line. Available when <a href="#series-lines.polyline">polyline</a> is not <code class="codespan">true</code>.</p>\n',
    )
    emphasis: Optional[Emphasis116] = Field(None, description='')
    blur: Optional[Blur92] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )
    select: Optional[Select31] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class _StyleName370(_StyleName3):
    pass


class Rich370(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName370] = Field(
        None, alias='<style_name>', description=''
    )


class Label333(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich370] = Field(
        None,
        description='<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',
    )


class ItemStyle254(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName371(_StyleName3):
    pass


class Rich371(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName371] = Field(
        None, alias='<style_name>', description=''
    )


class Label334(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich371] = Field(
        None,
        description='<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',
    )


class ItemStyle255(HandleStyle1):
    pass


class Emphasis117(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label334] = Field(None, description='')
    itemStyle: Optional[ItemStyle255] = Field(None, description='')


class _StyleName372(_StyleName3):
    pass


class Rich372(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName372] = Field(
        None, alias='<style_name>', description=''
    )


class Label335(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich372] = Field(
        None,
        description='<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',
    )


class ItemStyle256(HandleStyle1):
    pass


class Blur93(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label335] = Field(None, description='')
    itemStyle: Optional[ItemStyle256] = Field(None, description='')


class ItemStyle257(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName373(_StyleName3):
    pass


class Rich373(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName373] = Field(
        None, alias='<style_name>', description=''
    )


class Label336(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich373] = Field(
        None,
        description='<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',
    )


class _StyleName374(_StyleName3):
    pass


class Rich374(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName374] = Field(
        None, alias='<style_name>', description=''
    )


class Label337(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich374] = Field(
        None,
        description='<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',
    )


class ItemStyle258(HandleStyle1):
    pass


class Emphasis118(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label337] = Field(None, description='')
    itemStyle: Optional[ItemStyle258] = Field(None, description='')


class Datum31(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle257] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label336] = Field(None, description='')
    emphasis: Optional[Emphasis118] = Field(None, description='')


class MarkPoint9(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label333] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle254] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis117] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur93] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum31]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-lines.markPoint.data.x">x</a>, <a href="#series-lines.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName375(_StyleName3):
    pass


class Rich375(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName375] = Field(
        None, alias='<style_name>', description=''
    )


class Label338(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich375] = Field(
        None,
        description='<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',
    )


class LineStyle229(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName376(_StyleName3):
    pass


class Rich376(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName376] = Field(
        None, alias='<style_name>', description=''
    )


class Label339(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich376] = Field(
        None,
        description='<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',
    )


class LineStyle230(LineStyle51):
    pass


class Emphasis119(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label339] = Field(None, description='')
    lineStyle: Optional[LineStyle230] = Field(None, description='')


class _StyleName377(_StyleName3):
    pass


class Rich377(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName377] = Field(
        None, alias='<style_name>', description=''
    )


class Label340(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich377] = Field(
        None,
        description='<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',
    )


class LineStyle231(LineStyle51):
    pass


class Blur94(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label340] = Field(None, description='')
    lineStyle: Optional[LineStyle231] = Field(None, description='')


class LineStyle232(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName378(_StyleName3):
    pass


class Rich378(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName378] = Field(
        None, alias='<style_name>', description=''
    )


class Label341(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich378] = Field(
        None,
        description='<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',
    )


class LineStyle233(LineStyle60):
    pass


class _StyleName379(_StyleName3):
    pass


class Rich379(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName379] = Field(
        None, alias='<style_name>', description=''
    )


class Label342(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich379] = Field(
        None,
        description='<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',
    )


class Emphasis120(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle233] = Field(None, description='')
    label: Optional[Label342] = Field(None, description='')


class LineStyle234(LineStyle60):
    pass


class _StyleName380(_StyleName3):
    pass


class Rich380(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName380] = Field(
        None, alias='<style_name>', description=''
    )


class Label343(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich380] = Field(
        None,
        description='<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',
    )


class Blur95(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle234] = Field(None, description='')
    label: Optional[Label343] = Field(None, description='')


class Field018(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle232] = Field(
        None,
        description='<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',
    )
    label: Optional[Label341] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis120] = Field(None, description='')
    blur: Optional[Blur95] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle235(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName381(_StyleName3):
    pass


class Rich381(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName381] = Field(
        None, alias='<style_name>', description=''
    )


class Label344(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich381] = Field(
        None,
        description='<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',
    )


class LineStyle236(LineStyle60):
    pass


class _StyleName382(_StyleName3):
    pass


class Rich382(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName382] = Field(
        None, alias='<style_name>', description=''
    )


class Label345(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich382] = Field(
        None,
        description='<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',
    )


class Emphasis121(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle236] = Field(None, description='')
    label: Optional[Label345] = Field(None, description='')


class LineStyle237(LineStyle60):
    pass


class _StyleName383(_StyleName3):
    pass


class Rich383(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName383] = Field(
        None, alias='<style_name>', description=''
    )


class Label346(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich383] = Field(
        None,
        description='<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',
    )


class Blur96(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle237] = Field(None, description='')
    label: Optional[Label346] = Field(None, description='')


class Field118(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle235] = Field(
        None,
        description='<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',
    )
    label: Optional[Label344] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis121] = Field(None, description='')
    blur: Optional[Blur96] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data20(BaseModel):
    """
        <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>
    <ol>
    <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>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field018] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field118] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine9(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-lines.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label338] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle229] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis119] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur94] = Field(
        None,
        description='<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',
    )
    data: Optional[Data20] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-lines.markLine.data.0.x">x</a>, <a href="#series-lines.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n\n[\n        {\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName384(_StyleName3):
    pass


class Rich384(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName384] = Field(
        None, alias='<style_name>', description=''
    )


class Label347(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich384] = Field(
        None,
        description='<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',
    )


class ItemStyle259(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName385(_StyleName3):
    pass


class Rich385(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName385] = Field(
        None, alias='<style_name>', description=''
    )


class Label348(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich385] = Field(
        None,
        description='<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',
    )


class ItemStyle260(HandleStyle1):
    pass


class Emphasis122(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label348] = Field(None, description='')
    itemStyle: Optional[ItemStyle260] = Field(None, description='')


class _StyleName386(_StyleName3):
    pass


class Rich386(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName386] = Field(
        None, alias='<style_name>', description=''
    )


class Label349(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich386] = Field(
        None,
        description='<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',
    )


class ItemStyle261(HandleStyle1):
    pass


class Blur97(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label349] = Field(None, description='')
    itemStyle: Optional[ItemStyle261] = Field(None, description='')


class ItemStyle262(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName387(_StyleName3):
    pass


class Rich387(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName387] = Field(
        None, alias='<style_name>', description=''
    )


class Label350(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich387] = Field(
        None,
        description='<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',
    )


class ItemStyle263(HandleStyle1):
    pass


class _StyleName388(_StyleName3):
    pass


class Rich388(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName388] = Field(
        None, alias='<style_name>', description=''
    )


class Label351(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich388] = Field(
        None,
        description='<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',
    )


class Emphasis123(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle263] = Field(None, description='')
    label: Optional[Label351] = Field(None, description='')


class ItemStyle264(HandleStyle1):
    pass


class _StyleName389(_StyleName3):
    pass


class Rich389(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName389] = Field(
        None, alias='<style_name>', description=''
    )


class Label352(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich389] = Field(
        None,
        description='<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',
    )


class Blur98(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle264] = Field(None, description='')
    label: Optional[Label352] = Field(None, description='')


class Field019(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle262] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label350] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis123] = Field(None, description='')
    blur: Optional[Blur98] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle265(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName390(_StyleName3):
    pass


class Rich390(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName390] = Field(
        None, alias='<style_name>', description=''
    )


class Label353(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich390] = Field(
        None,
        description='<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',
    )


class ItemStyle266(HandleStyle1):
    pass


class _StyleName391(_StyleName3):
    pass


class Rich391(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName391] = Field(
        None, alias='<style_name>', description=''
    )


class Label354(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich391] = Field(
        None,
        description='<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',
    )


class Emphasis124(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle266] = Field(None, description='')
    label: Optional[Label354] = Field(None, description='')


class ItemStyle267(HandleStyle1):
    pass


class _StyleName392(_StyleName3):
    pass


class Rich392(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName392] = Field(
        None, alias='<style_name>', description=''
    )


class Label355(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich392] = Field(
        None,
        description='<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',
    )


class Blur99(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle267] = Field(None, description='')
    label: Optional[Label355] = Field(None, description='')


class Field119(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle265] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label353] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis124] = Field(None, description='')
    blur: Optional[Blur99] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data21(BaseModel):
    """
        <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>
    <ol>
    <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>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field019] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field119] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea9(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label347] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle259] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis122] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur97] = Field(
        None,
        description='<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',
    )
    data: Optional[Data21] = Field(
        None,
        description='<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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition9(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class Series15(BaseModel):
    """
        <p><strong>Lines graph</strong></p>
    <p>It is used to draw the line data with the information about &quot;from&quot; and &quot;to&quot;; and it is applied fot drawing the air routes on map, which visualizes these routes.</p>
    <p>ECharts 2.x uses the <code class="codespan">markLine</code> to draw the migrating effect, while in ECharts 3, the <code class="codespan">lines</code> graph is recommended to be used.</p>

    """

    type: Optional[str] = Field('lines', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    coordinateSystem: Optional[str] = Field(
        'geo',
        description='<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: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    geoIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#geo">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n',
    )
    polyline: Optional[bool] = Field(
        False,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=lines-bmap-bus" target="_blank">lines-bus</a>.</p>\n',
    )
    effect: Optional[Effect] = Field(
        None,
        description='<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',
    )
    large: Optional[bool] = Field(
        True,
        description='<p>Whether to enable the optimization of large-scale lines graph. It could be enabled when there is a particularly large number of data(&gt;=5k) .</p>\n<p>After being enabled, <a href="#series-lines.largeThreshold">largeThreshold</a> can be used to indicate the minimum number for turning on the optimization.</p>\n<p>The style of a single data item can&#39;t be customized</p>\n',
    )
    largeThreshold: Optional[float] = Field(
        2000, description='<p>The threshold enabling the drawing optimization.</p>\n'
    )
    symbol: Optional[Union[str, Any]] = Field(
        'none',
        description='<p>Symbol type at the two ends of the line. It can be an array for two ends, or assigned seperately. See <a href="#series-line.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        10,
        description='<p>Symbol size at the two ends of the line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    lineStyle: Optional[LineStyle221] = Field(None, description='')
    label: Optional[Label325] = Field(
        None,
        description='<p>Label settings. Does not work when <a href="#series-lines.polyline">polyline</a> is <code class="codespan">true</code>.</p>\n',
    )
    labelLayout: Optional[LabelLayout11] = Field(
        None,
        description='<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',
    )
    emphasis: Optional[Emphasis115] = Field(
        None, description='<p>Emphasis state.</p>\n'
    )
    blur: Optional[Blur91] = Field(
        None,
        description='<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',
    )
    select: Optional[Select30] = Field(
        None,
        description='<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',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    progressive: Optional[float] = Field(
        400,
        description='<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: Optional[float] = Field(
        3000,
        description='<p>If current data amount is over the threshold, &quot;progressive rendering&quot; is enabled.</p>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum30]] = Field(
        None, description='<p>The data set of lines.</p>\n'
    )
    markPoint: Optional[MarkPoint9] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine9] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea9] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    clip: Optional[bool] = Field(
        True,
        description='\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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition9] = Field(
        None,
        description='<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',
    )


class Circular(BaseModel):
    """
    <p>Configuration about circular layout.</p>

    """

    rotateLabel: Optional[bool] = Field(
        False, description='\n\n<p>Whether to rotate the label automatically.</p>\n'
    )


class Force(BaseModel):
    """
        <p>Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.</p>
    <p>The result of force-directed layout has a good symmetries and clustering, which is also aesthetically pleasing.</p>

    """

    initLayout: Optional[str] = Field(
        None,
        description='<p>The initial layout before force-directed layout, which will influence on the result of force-directed layout.</p>\n<p>It defaults not to do any layout and use <a href="#series-graph.data.x">x</a>, <a href="#series-graph.data.y">y</a> provided in <a href="#series-graph.data">node</a> as the position of node. If it doesn&#39;t exist, the position will be generated randomly.</p>\n<p>You can also use circular layout <code class="codespan">&#39;circular&#39;</code>.</p>\n',
    )
    repulsion: Optional[Union[Any, float]] = Field(
        50,
        description='\n\n<p>The repulsion factor between nodes. The repulsion will be stronger and the distance between 2 nodes becomes further as this value becomes larger.</p>\n<p>It can be an array to represent the range of repulsion. In this case larger value have larger repulsion and smaller value will have smaller repulsion.</p>\n',
    )
    gravity: Optional[float] = Field(
        0.1,
        description='\n\n<p>The gravity factor enforcing nodes approach to the center. The nodes will be closer to the center as the value becomes larger.</p>\n',
    )
    edgeLength: Optional[Union[Any, float]] = Field(
        30,
        description='\n\n<p>The distance between 2 nodes on edge. This distance is also affected by <a href="#series-graph.force.repulsion">repulsion</a>.</p>\n<p>It can be an array to represent the range of edge length. In this case edge with larger value will be shorter, which means two nodes are closer. And edge with smaller value will be longer.</p>\n',
    )
    layoutAnimation: Optional[bool] = Field(
        True,
        description='\n\n<p>Because the force-directed layout will be steady after several iterations, this parameter will be decide whether to show the iteration animation of layout. It is not recommended to be closed on browser when there are a lot of node data (&gt;100) as the layout process will cause browser to hang.</p>\n',
    )
    friction: Optional[float] = Field(
        0.6,
        description='\n\n\n\n<blockquote>\n<p>Since <code class="codespan">v4.5.0</code></p>\n</blockquote>\n<p>It will slow down the nodes&#39; movement. The value range is from 0 to 1.</p>\n<p>But it is still an experimental option, see <a href="https://github.com/apache/echarts/issues/11024" target="_blank">#11024</a>.</p>\n',
    )


class ScaleLimit2(ScaleLimit):
    """
    <p>Limit of scaling, with <code class="codespan">min</code> and <code class="codespan">max</code>. <code class="codespan">1</code> by default.</p>

    """

    pass


class ItemStyle268(ItemStyle102):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    pass


class LineStyle238(BaseModel):
    """
    <p>The style of edge line. <a href="#series-graph.lineStyle.color">lineStyle.color</a> can be <code class="codespan">&#39;source&#39;</code> or <code class="codespan">&#39;target&#39;</code>, which will use the color of source node or target node.</p>

    """

    color: Optional[Any] = Field(
        '#aaa',
        description='\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',
    )
    width: Optional[float] = Field(1, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        0.5,
        description='\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',
    )
    curveness: Optional[float] = Field(
        0,
        description='\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n',
    )


class _StyleName393(_StyleName3):
    pass


class Rich393(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName393] = Field(
        None, alias='<style_name>', description=''
    )


class Label356(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich393] = Field(
        None,
        description='<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',
    )


class _StyleName394(_StyleName):
    pass


class Rich394(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName394] = Field(
        None, alias='<style_name>', description=''
    )


class EdgeLabel(BaseModel):
    show: Optional[bool] = Field(False, description='<p>If show label on edge.</p>\n')
    position: Optional[str] = Field(
        'middle',
        description='<p>Label position, 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich394] = Field(
        None,
        description='<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',
    )


class LabelLayout12(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class ItemStyle269(ItemStyle15):
    pass


class LineStyle239(LineStyle60):
    pass


class _StyleName395(_StyleName3):
    pass


class Rich395(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName395] = Field(
        None, alias='<style_name>', description=''
    )


class Label357(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich395] = Field(
        None,
        description='<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',
    )


class _StyleName396(_StyleName):
    pass


class Rich396(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName396] = Field(
        None, alias='<style_name>', description=''
    )


class EdgeLabel1(BaseModel):
    show: Optional[bool] = Field(False, description='<p>If show label on edge.</p>\n')
    position: Optional[str] = Field(
        'middle',
        description='<p>Label position, 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich396] = Field(
        None,
        description='<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',
    )


class Emphasis125(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    scale: Optional[Union[bool, float]] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n\n\n<p>Whether to scale to highlight the node in emphasis state. <code class="codespan">number</code> has been supported since <code class="codespan">v5.3.2</code>, the default scale value is 1.1.</p>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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<ul>\n<li><code class="codespan">&#39;adjacency&#39;</code> Focus on the elements of adjacent nodes and edges in the graph.</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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    itemStyle: Optional[ItemStyle269] = Field(None, description='')
    lineStyle: Optional[LineStyle239] = Field(None, description='')
    label: Optional[Label357] = Field(None, description='')
    edgeLabel: Optional[EdgeLabel1] = Field(None, description='')


class ItemStyle270(HandleStyle1):
    pass


class LineStyle240(LineStyle60):
    pass


class _StyleName397(_StyleName3):
    pass


class Rich397(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName397] = Field(
        None, alias='<style_name>', description=''
    )


class Label358(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich397] = Field(
        None,
        description='<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',
    )


class _StyleName398(_StyleName):
    pass


class Rich398(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName398] = Field(
        None, alias='<style_name>', description=''
    )


class EdgeLabel2(BaseModel):
    show: Optional[bool] = Field(False, description='<p>If show label on edge.</p>\n')
    position: Optional[str] = Field(
        'middle',
        description='<p>Label position, 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich398] = Field(
        None,
        description='<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',
    )


class Blur100(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-graph.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    itemStyle: Optional[ItemStyle270] = Field(None, description='')
    lineStyle: Optional[LineStyle240] = Field(None, description='')
    label: Optional[Label358] = Field(None, description='')
    edgeLabel: Optional[EdgeLabel2] = Field(None, description='')


class ItemStyle271(HandleStyle1):
    pass


class LineStyle241(LineStyle60):
    pass


class _StyleName399(_StyleName3):
    pass


class Rich399(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName399] = Field(
        None, alias='<style_name>', description=''
    )


class Label359(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich399] = Field(
        None,
        description='<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',
    )


class _StyleName400(_StyleName):
    pass


class Rich400(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName400] = Field(
        None, alias='<style_name>', description=''
    )


class EdgeLabel3(BaseModel):
    show: Optional[bool] = Field(False, description='<p>If show label on edge.</p>\n')
    position: Optional[str] = Field(
        'middle',
        description='<p>Label position, 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich400] = Field(
        None,
        description='<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',
    )


class Select32(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-graph.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle271] = Field(None, description='')
    lineStyle: Optional[LineStyle241] = Field(None, description='')
    label: Optional[Label359] = Field(None, description='')
    edgeLabel: Optional[EdgeLabel3] = Field(None, description='')


class ItemStyle272(ItemStyle136):
    """
    <p>The style of node in this category.</p>

    """

    pass


class _StyleName401(_StyleName3):
    pass


class Rich401(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName401] = Field(
        None, alias='<style_name>', description=''
    )


class Label360(BaseModel):
    """
    <p>The label style of node in this category.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich401] = Field(
        None,
        description='<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',
    )


class ItemStyle273(ItemStyle15):
    pass


class _StyleName402(_StyleName3):
    pass


class Rich402(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName402] = Field(
        None, alias='<style_name>', description=''
    )


class Label361(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich402] = Field(
        None,
        description='<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',
    )


class Emphasis126(BaseModel):
    """
    <p>Emphasis state of nodes in this category.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle273] = Field(None, description='')
    label: Optional[Label361] = Field(None, description='')


class ItemStyle274(HandleStyle1):
    pass


class _StyleName403(_StyleName3):
    pass


class Rich403(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName403] = Field(
        None, alias='<style_name>', description=''
    )


class Label362(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich403] = Field(
        None,
        description='<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',
    )


class Blur101(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of nodes in this category.</p>

    """

    itemStyle: Optional[ItemStyle274] = Field(None, description='')
    label: Optional[Label362] = Field(None, description='')


class ItemStyle275(HandleStyle1):
    pass


class _StyleName404(_StyleName3):
    pass


class Rich404(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName404] = Field(
        None, alias='<style_name>', description=''
    )


class Label363(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich404] = Field(
        None,
        description='<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',
    )


class Select33(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of nodes in this category.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle275] = Field(None, description='')
    label: Optional[Label363] = Field(None, description='')


class Category(BaseModel):
    name: Optional[str] = Field(
        None,
        description='<p>Name of category, which is used to correspond with <a href="#legend">legend</a> and the content of <a href="#tooltip">tooltip</a>.</p>\n',
    )
    symbol: Optional[str] = Field(
        None,
        description='\n\n<p>Symbol of node of this category.</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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\n\n<p>node of this category 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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate degree of node of this category 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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code 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',
    )
    itemStyle: Optional[ItemStyle272] = Field(
        None, description='<p>The style of node in this category.</p>\n'
    )
    label: Optional[Label360] = Field(
        None, description='<p>The label style of node in this category.</p>\n'
    )
    emphasis: Optional[Emphasis126] = Field(
        None, description='<p>Emphasis state of nodes in this category.</p>\n'
    )
    blur: Optional[Blur101] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of nodes in this category.</p>\n',
    )
    select: Optional[Select33] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of nodes in this category.</p>\n',
    )


class ItemStyle276(ItemStyle136):
    """
    <p>The style of this node.</p>

    """

    pass


class _StyleName405(_StyleName3):
    pass


class Rich405(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName405] = Field(
        None, alias='<style_name>', description=''
    )


class Label364(BaseModel):
    """
    <p>The label style of this node.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich405] = Field(
        None,
        description='<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',
    )


class ItemStyle277(ItemStyle15):
    pass


class _StyleName406(_StyleName3):
    pass


class Rich406(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName406] = Field(
        None, alias='<style_name>', description=''
    )


class Label365(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich406] = Field(
        None,
        description='<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',
    )


class Emphasis127(BaseModel):
    """
    <p>Emphasis state of specified node.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle277] = Field(None, description='')
    label: Optional[Label365] = Field(None, description='')


class ItemStyle278(HandleStyle1):
    pass


class _StyleName407(_StyleName3):
    pass


class Rich407(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName407] = Field(
        None, alias='<style_name>', description=''
    )


class Label366(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich407] = Field(
        None,
        description='<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',
    )


class Blur102(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of specified node.</p>

    """

    itemStyle: Optional[ItemStyle278] = Field(None, description='')
    label: Optional[Label366] = Field(None, description='')


class ItemStyle279(HandleStyle1):
    pass


class _StyleName408(_StyleName3):
    pass


class Rich408(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName408] = Field(
        None, alias='<style_name>', description=''
    )


class Label367(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich408] = Field(
        None,
        description='<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',
    )


class Select34(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of specified node.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle279] = Field(None, description='')
    label: Optional[Label367] = Field(None, description='')


class TextStyle42(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip28(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle42] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum32(BaseModel):
    name: Optional[str] = Field(None, description='<p>Name of data item.</p>\n')
    x: Optional[float] = Field(
        None,
        description='<p><code class="codespan">x</code> value of node position.</p>\n',
    )
    y: Optional[float] = Field(
        None,
        description='<p><code class="codespan">y</code> value of node position.</p>\n',
    )
    fixed: Optional[bool] = Field(
        None, description='<p>If node are fixed when doing force directed layout.</p>\n'
    )
    value: Optional[Union[float, Any]] = Field(
        None, description='<p>Value of data item.</p>\n'
    )
    category: Optional[float] = Field(
        None, description='<p>Index of category which the data item belongs to.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\n\n<p>Symbol of node of this category.</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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\n\n<p>node of this category 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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate degree of node of this category 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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Offset of node of this category symbol relative to original position. By default, symbol will be put in the center position of data. But if symbol is from user-defined vector path or image, you may not expect symbol to be in center. In this case, you may use this attribute to set offset to default position. It can be in absolute pixel value, or in relative percentage value.</p>\n<p>For example, <code 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',
    )
    itemStyle: Optional[ItemStyle276] = Field(
        None, description='<p>The style of this node.</p>\n'
    )
    label: Optional[Label364] = Field(
        None, description='<p>The label style of this node.</p>\n'
    )
    emphasis: Optional[Emphasis127] = Field(
        None, description='<p>Emphasis state of specified node.</p>\n'
    )
    blur: Optional[Blur102] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of specified node.</p>\n',
    )
    select: Optional[Select34] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of specified node.</p>\n',
    )
    tooltip: Optional[Tooltip28] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class LineStyle242(BaseModel):
    """
    <p>Line style of edges.</p>

    """

    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(0, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    curveness: Optional[float] = Field(
        0,
        description='\n\n<p>The curveness of edge, supporting values from 0 to 1. The curveness will be larger as the value becomes lager.</p>\n',
    )


class _StyleName409(_StyleName):
    pass


class Rich409(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName409] = Field(
        None, alias='<style_name>', description=''
    )


class Label368(BaseModel):
    show: Optional[bool] = Field(False, description='<p>If show label on edge.</p>\n')
    position: Optional[str] = Field(
        'middle',
        description='<p>Label position, 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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich409] = Field(
        None,
        description='<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',
    )


class LineStyle243(BaseModel):
    color: Optional[Any] = Field(
        '"#000"',
        description='\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',
    )
    width: Optional[float] = Field(0, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    curveness: Optional[float] = Field(
        0,
        description='\n\n<p>Edge curvature, which supports value from 0 to 1. The larger the value, the greater the curvature.</p>\n',
    )


class _StyleName410(_StyleName3):
    pass


class Rich410(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName410] = Field(
        None, alias='<style_name>', description=''
    )


class Label369(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich410] = Field(
        None,
        description='<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',
    )


class Emphasis128(BaseModel):
    """
    <p>Emphasis state of specified edge.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle243] = Field(None, description='')
    label: Optional[Label369] = Field(None, description='')


class LineStyle244(LineStyle60):
    pass


class _StyleName411(_StyleName3):
    pass


class Rich411(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName411] = Field(
        None, alias='<style_name>', description=''
    )


class Label370(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich411] = Field(
        None,
        description='<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',
    )


class Blur103(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of specified edge.</p>

    """

    lineStyle: Optional[LineStyle244] = Field(None, description='')
    label: Optional[Label370] = Field(None, description='')


class LineStyle245(LineStyle60):
    pass


class _StyleName412(_StyleName3):
    pass


class Rich412(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName412] = Field(
        None, alias='<style_name>', description=''
    )


class Label371(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich412] = Field(
        None,
        description='<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',
    )


class Select35(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of specified edge.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle245] = Field(None, description='')
    label: Optional[Label371] = Field(None, description='')


class Link(BaseModel):
    source: Optional[Union[str, float]] = Field(
        None,
        description='<p>A string representing the <a href="#series-graph.data.name">name of source node</a> on edge. Can also be a number representing the node index.</p>\n',
    )
    target: Optional[Union[str, float]] = Field(
        None,
        description='<p>A string representing the <a href="#series-graph.data.name">name of target node</a> on edge. Can also be a number representing node index.</p>\n',
    )
    value: Optional[float] = Field(
        None,
        description='<p>value of edge, can be mapped to edge length in force graph.</p>\n',
    )
    lineStyle: Optional[LineStyle242] = Field(
        None, description='<p>Line style of edges.</p>\n'
    )
    label: Optional[Label368] = Field(None, description='')
    emphasis: Optional[Emphasis128] = Field(
        None, description='<p>Emphasis state of specified edge.</p>\n'
    )
    blur: Optional[Blur103] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of specified edge.</p>\n',
    )
    select: Optional[Select35] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of specified edge.</p>\n',
    )
    symbol: Optional[Union[Any, str]] = Field(
        None,
        description='<p>Symbol of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.</p>\n',
    )
    symbolSize: Optional[Union[Any, str]] = Field(
        None,
        description='<p>Symbol size of edge ends. Can be an array with two item to specify two ends, or a string specifies both ends.</p>\n',
    )
    ignoreForceLayout: Optional[bool] = Field(
        False,
        description='<blockquote>\n<p>Since <code class="codespan">v4.5.0</code></p>\n</blockquote>\n<p>Prevent this edge from force layout calculating.</p>\n',
    )


class _StyleName413(_StyleName3):
    pass


class Rich413(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName413] = Field(
        None, alias='<style_name>', description=''
    )


class Label372(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich413] = Field(
        None,
        description='<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',
    )


class ItemStyle280(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName414(_StyleName3):
    pass


class Rich414(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName414] = Field(
        None, alias='<style_name>', description=''
    )


class Label373(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich414] = Field(
        None,
        description='<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',
    )


class ItemStyle281(HandleStyle1):
    pass


class Emphasis129(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label373] = Field(None, description='')
    itemStyle: Optional[ItemStyle281] = Field(None, description='')


class _StyleName415(_StyleName3):
    pass


class Rich415(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName415] = Field(
        None, alias='<style_name>', description=''
    )


class Label374(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich415] = Field(
        None,
        description='<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',
    )


class ItemStyle282(HandleStyle1):
    pass


class Blur104(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label374] = Field(None, description='')
    itemStyle: Optional[ItemStyle282] = Field(None, description='')


class ItemStyle283(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName416(_StyleName3):
    pass


class Rich416(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName416] = Field(
        None, alias='<style_name>', description=''
    )


class Label375(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich416] = Field(
        None,
        description='<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',
    )


class _StyleName417(_StyleName3):
    pass


class Rich417(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName417] = Field(
        None, alias='<style_name>', description=''
    )


class Label376(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich417] = Field(
        None,
        description='<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',
    )


class ItemStyle284(HandleStyle1):
    pass


class Emphasis130(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label376] = Field(None, description='')
    itemStyle: Optional[ItemStyle284] = Field(None, description='')


class Datum33(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Available when using <a href="#series-graph.markPoint.data.type">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class="codespan">0</code> (xAxis, radiusAxis), <code class="codespan">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-graph.markPoint.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle283] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label375] = Field(None, description='')
    emphasis: Optional[Emphasis130] = Field(None, description='')


class MarkPoint10(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-graph.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-graph.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-graph.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label372] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle280] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis129] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur104] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum33]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-graph.markPoint.data.x">x</a>, <a href="#series-graph.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-graph.markPoint.data.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-graph.markPoint.data.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-graph.markPoint.data.valueIndex">valueIndex</a> or <a href="#series-graph.markPoint.data.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName418(_StyleName3):
    pass


class Rich418(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName418] = Field(
        None, alias='<style_name>', description=''
    )


class Label377(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich418] = Field(
        None,
        description='<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',
    )


class LineStyle246(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName419(_StyleName3):
    pass


class Rich419(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName419] = Field(
        None, alias='<style_name>', description=''
    )


class Label378(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich419] = Field(
        None,
        description='<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',
    )


class LineStyle247(LineStyle51):
    pass


class Emphasis131(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label378] = Field(None, description='')
    lineStyle: Optional[LineStyle247] = Field(None, description='')


class _StyleName420(_StyleName3):
    pass


class Rich420(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName420] = Field(
        None, alias='<style_name>', description=''
    )


class Label379(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich420] = Field(
        None,
        description='<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',
    )


class LineStyle248(LineStyle51):
    pass


class Blur105(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label379] = Field(None, description='')
    lineStyle: Optional[LineStyle248] = Field(None, description='')


class LineStyle249(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName421(_StyleName3):
    pass


class Rich421(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName421] = Field(
        None, alias='<style_name>', description=''
    )


class Label380(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich421] = Field(
        None,
        description='<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',
    )


class LineStyle250(LineStyle60):
    pass


class _StyleName422(_StyleName3):
    pass


class Rich422(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName422] = Field(
        None, alias='<style_name>', description=''
    )


class Label381(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich422] = Field(
        None,
        description='<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',
    )


class Emphasis132(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle250] = Field(None, description='')
    label: Optional[Label381] = Field(None, description='')


class LineStyle251(LineStyle60):
    pass


class _StyleName423(_StyleName3):
    pass


class Rich423(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName423] = Field(
        None, alias='<style_name>', description=''
    )


class Label382(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich423] = Field(
        None,
        description='<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',
    )


class Blur106(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle251] = Field(None, description='')
    label: Optional[Label382] = Field(None, description='')


class Field020(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-graph.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-graph.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle249] = Field(
        None,
        description='<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',
    )
    label: Optional[Label380] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis132] = Field(None, description='')
    blur: Optional[Blur106] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle252(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName424(_StyleName3):
    pass


class Rich424(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName424] = Field(
        None, alias='<style_name>', description=''
    )


class Label383(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich424] = Field(
        None,
        description='<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',
    )


class LineStyle253(LineStyle60):
    pass


class _StyleName425(_StyleName3):
    pass


class Rich425(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName425] = Field(
        None, alias='<style_name>', description=''
    )


class Label384(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich425] = Field(
        None,
        description='<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',
    )


class Emphasis133(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle253] = Field(None, description='')
    label: Optional[Label384] = Field(None, description='')


class LineStyle254(LineStyle60):
    pass


class _StyleName426(_StyleName3):
    pass


class Rich426(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName426] = Field(
        None, alias='<style_name>', description=''
    )


class Label385(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich426] = Field(
        None,
        description='<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',
    )


class Blur107(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle254] = Field(None, description='')
    label: Optional[Label385] = Field(None, description='')


class Field120(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-graph.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-graph.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle252] = Field(
        None,
        description='<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',
    )
    label: Optional[Label383] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis133] = Field(None, description='')
    blur: Optional[Blur107] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data22(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-graph.markLine.data.0.x">x</a>, <a href="#series-graph.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <ol start="2">
    <li><p>Assign coordinate position with <a href="#series-graph.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>
    </li>
    <li><p>Use <a href="#series-graph.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-graph.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-graph.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>
    </li>
    <li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>
    </li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>
    <pre><code>data: [

    {
            name: &#39;average line&#39;,
            // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported
            type: &#39;average&#39;
        },
        {
            name: &#39;Horizontal line with Y value at 100&#39;,
            yAxis: 100
        },
        [
            {
                // Use the same name with starting and ending point
                name: &#39;Minimum to Maximum&#39;,
                type: &#39;min&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],
    [
            {
                name: &#39;Markline between two points&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [{
            // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
            yAxis: &#39;max&#39;,
            x: &#39;90%&#39;
        }, {
            type: &#39;max&#39;
        }],
    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field020] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field120] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine10(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-graph.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label377] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle246] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis131] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur105] = Field(
        None,
        description='<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',
    )
    data: Optional[Data22] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-graph.markLine.data.0.x">x</a>, <a href="#series-graph.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-graph.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-graph.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-graph.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-graph.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>\n<pre><code>data: [\n\n{\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n[\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName427(_StyleName3):
    pass


class Rich427(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName427] = Field(
        None, alias='<style_name>', description=''
    )


class Label386(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich427] = Field(
        None,
        description='<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',
    )


class ItemStyle285(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName428(_StyleName3):
    pass


class Rich428(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName428] = Field(
        None, alias='<style_name>', description=''
    )


class Label387(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich428] = Field(
        None,
        description='<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',
    )


class ItemStyle286(HandleStyle1):
    pass


class Emphasis134(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label387] = Field(None, description='')
    itemStyle: Optional[ItemStyle286] = Field(None, description='')


class _StyleName429(_StyleName3):
    pass


class Rich429(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName429] = Field(
        None, alias='<style_name>', description=''
    )


class Label388(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich429] = Field(
        None,
        description='<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',
    )


class ItemStyle287(HandleStyle1):
    pass


class Blur108(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label388] = Field(None, description='')
    itemStyle: Optional[ItemStyle287] = Field(None, description='')


class ItemStyle288(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName430(_StyleName3):
    pass


class Rich430(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName430] = Field(
        None, alias='<style_name>', description=''
    )


class Label389(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich430] = Field(
        None,
        description='<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',
    )


class ItemStyle289(HandleStyle1):
    pass


class _StyleName431(_StyleName3):
    pass


class Rich431(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName431] = Field(
        None, alias='<style_name>', description=''
    )


class Label390(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich431] = Field(
        None,
        description='<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',
    )


class Emphasis135(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle289] = Field(None, description='')
    label: Optional[Label390] = Field(None, description='')


class ItemStyle290(HandleStyle1):
    pass


class _StyleName432(_StyleName3):
    pass


class Rich432(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName432] = Field(
        None, alias='<style_name>', description=''
    )


class Label391(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich432] = Field(
        None,
        description='<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',
    )


class Blur109(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle290] = Field(None, description='')
    label: Optional[Label391] = Field(None, description='')


class Field021(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-graph.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-graph.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle288] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label389] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis135] = Field(None, description='')
    blur: Optional[Blur109] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle291(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName433(_StyleName3):
    pass


class Rich433(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName433] = Field(
        None, alias='<style_name>', description=''
    )


class Label392(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich433] = Field(
        None,
        description='<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',
    )


class ItemStyle292(HandleStyle1):
    pass


class _StyleName434(_StyleName3):
    pass


class Rich434(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName434] = Field(
        None, alias='<style_name>', description=''
    )


class Label393(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich434] = Field(
        None,
        description='<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',
    )


class Emphasis136(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle292] = Field(None, description='')
    label: Optional[Label393] = Field(None, description='')


class ItemStyle293(HandleStyle1):
    pass


class _StyleName435(_StyleName3):
    pass


class Rich435(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName435] = Field(
        None, alias='<style_name>', description=''
    )


class Label394(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich435] = Field(
        None,
        description='<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',
    )


class Blur110(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle293] = Field(None, description='')
    label: Optional[Label394] = Field(None, description='')


class Field121(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-graph.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-graph.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle291] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label392] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis136] = Field(None, description='')
    blur: Optional[Blur110] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data23(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-graph.markArea.data.0.x">x</a>, <a href="#series-graph.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <ol start="2">
    <li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using
    <a href="#series-graph.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>
    </li>
    <li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-graph.markArea.data.0.type">type</a>, where <a href="#series-graph.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-graph.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>
    </li>
    <li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [


        [
            {
                name: &#39;From average to max&#39;,
                type: &#39;average&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],

        [
            {
                name: &#39;Mark area between two points in data coordiantes&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [
            {
                name: &#39;From 60 to 80&#39;,
                yAxis: 60
            },
            {
                yAxis: 80
            }
        ], [
            {
                name: &#39;Mark area covers all data&#39;
                coord: [&#39;min&#39;, &#39;min&#39;]
            },
            {
                coord: [&#39;max&#39;, &#39;max&#39;]
            }
        ],
    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field021] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field121] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea10(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label386] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle285] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis134] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur108] = Field(
        None,
        description='<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',
    )
    data: Optional[Data23] = Field(
        None,
        description='<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-graph.markArea.data.0.x">x</a>, <a href="#series-graph.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>\n</ol>\n<ol start="2">\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href="#series-graph.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n<li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-graph.markArea.data.0.type">type</a>, where <a href="#series-graph.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-graph.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>\n</li>\n<li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class TextStyle43(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip29(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle43] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series16(BaseModel):
    """
        <p><strong>relation graph</strong></p>
    <p>Graph is a diagram to represent <a href="#series-graph.nodes">nodes</a> and the <a href="#series-graph.links">links</a> connecting nodes.</p>
    <p><strong>Example: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=graph&reset=1&edit=1" width="600" height="400"></iframe>


    """

    type: Optional[str] = Field('graph', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    coordinateSystem: Optional[str] = Field(
        None,
        description='<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class="codespan">null</code> or <code class="codespan">&#39;none&#39;</code></p>\n<p>  No coordinate.</p>\n</li>\n</ul>\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-graph.xAxisIndex">xAxisIndex</a> and <a href="#series-graph.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href="#series-graph.polarIndex">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href="#series-graph.geoIndex">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;none&#39;</code></p>\n<p>  Do not use coordinate system.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    polarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#polar">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n',
    )
    geoIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#geo">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n',
    )
    calendarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#calendar">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n',
    )
    center: Optional[Any] = Field(
        None,
        description='\n\n<p>Center of current view-port. It can be an arrary containing two <code class="codespan">number</code>s in pixels or <code class="codespan">string</code>s in percentage relative to the container width/height.\n<code class="codespan">string</code> is supported from version <code class="codespan">5.3.3</code>.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">center: [115.97, &#39;30%&#39;]\n</code></pre>\n',
    )
    zoom: Optional[float] = Field(
        1, description='\n\n<p>Zoom rate of current view-port.</p>\n'
    )
    layout: Optional[str] = Field(
        'none',
        description='\n\n<p>Graph layout.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><p><code class="codespan">&#39;none&#39;</code> No any layout, use  <a href="#series-graph.data.x">x</a>,  <a href="#series-graph.data.y">y</a> provided in <a href="#series-graph.data">node</a> as the position of node.</p>\n</li>\n<li><p><code class="codespan">&#39;circular&#39;</code> Adopt circular layout, see the example <a href="http://localhost/echarts-website/examples/en/editor.html?c=graph-circular-layout" target="_blank">Les Miserables</a>.</p>\n</li>\n<li><p><code class="codespan">&#39;force&#39;</code> Adopt force-directed layout, see the example <a href="http://localhost/echarts-website/examples/en/editor.html?c=graph-force" target="_blank">Force</a>, the detail about configrations of layout are in <a href="#series-graph.force">graph.force</a></p>\n</li>\n</ul>\n',
    )
    circular: Optional[Circular] = Field(
        None, description='<p>Configuration about circular layout.</p>\n'
    )
    force: Optional[Force] = Field(
        None,
        description='<p>Configuration items about force-directed layout. Force-directed layout simulates spring/charge model, which will add a repulsion between 2 nodes and add a attraction between 2 nodes of each edge. In each iteration nodes will move under the effect of repulsion and attraction. After several iterations, the nodes will be static in a balanced position. As a result, the energy local minimum of this whole model will be realized.</p>\n<p>The result of force-directed layout has a good symmetries and clustering, which is also aesthetically pleasing.</p>\n',
    )
    roam: Optional[Union[bool, str]] = Field(
        False,
        description='\n\n<p>Whether to enable mouse zooming and translating. <code class="codespan">false</code> by default. If either zooming or translating is wanted, it can be set to <code class="codespan">&#39;scale&#39;</code> or <code class="codespan">&#39;move&#39;</code>. Otherwise, set it to be <code class="codespan">true</code> to enable both.</p>\n',
    )
    scaleLimit: Optional[ScaleLimit2] = Field(
        None,
        description='<p>Limit of scaling, with <code class="codespan">min</code> and <code class="codespan">max</code>. <code class="codespan">1</code> by default.</p>\n',
    )
    nodeScaleRatio: Optional[float] = Field(
        0.6,
        description='\n\n<p>Related zooming ratio of nodes when mouse zooming in or out. When it is set as 0, the node will not zoom as the mouse zooms.</p>\n',
    )
    draggable: Optional[bool] = Field(
        False,
        description='\n\n<p>If node is draggable. Only available when using force-directed layout.</p>\n',
    )
    symbol: Optional[str] = Field(
        None,
        description='\n\n<p>Symbol of node.</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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\n\n<p>node 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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate degree of node 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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Offset of node 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',
    )
    edgeSymbol: Optional[Union[Any, str]] = Field(
        "['none', 'none']",
        description='<p>Symbol of two ends of edge line.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">edgeSymbol: [&#39;circle&#39;, &#39;arrow&#39;]\n</code></pre>\n',
    )
    edgeSymbolSize: Optional[Union[Any, float]] = Field(
        10,
        description='\n\n<p>Size of symbol of two ends of edge line. Can be an array or a single number.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">// Start symbol has size 5 and end symbol has size 10\nedgeSymbolSize: [5, 10],\n// All has size 10\nedgeSymbolSize: 10\n</code></pre>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    itemStyle: Optional[ItemStyle268] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    lineStyle: Optional[LineStyle238] = Field(
        None,
        description='<p>The style of edge line. <a href="#series-graph.lineStyle.color">lineStyle.color</a> can be <code class="codespan">&#39;source&#39;</code> or <code class="codespan">&#39;target&#39;</code>, which will use the color of source node or target node.</p>\n',
    )
    label: Optional[Label356] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    edgeLabel: Optional[EdgeLabel] = Field(None, description='')
    labelLayout: Optional[LabelLayout12] = Field(
        None,
        description='<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',
    )
    emphasis: Optional[Emphasis125] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur100] = Field(
        None,
        description='<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-graph.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select32] = Field(
        None,
        description='<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-graph.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    categories: Optional[List[Category]] = Field(
        None,
        description='<p>The categories of node, which is optional.\nIf there is a classification of nodes, the category of each node can be assigned through <a href="#series-graph.data.category">data[i].category</a>. And the style of category will also be applied to the style of nodes. <code class="codespan">categories</code> can also be used in <a href="#legend">legend</a>.</p>\n',
    )
    autoCurveness: Optional[Union[bool, float, Any]] = Field(
        False,
        description='<p>For the situation where there are multiple links between nodes, the curveness of each link is automatically calculated, not enabled by default.</p>\n<p>When set <code class="codespan">true</code> to enable automatic curvature calculation, the default edge curvenness array length is <code class="codespan">20</code>, if the number of edges between two nodes is more than <code class="codespan">20</code>, please use <code class="codespan">number</code> or <code class="codespan">Array</code> to set the edge curvenness array.</p>\n<p>When set to <code class="codespan">number</code>, it indicates the length of the edge curvenness array between two nodes, and the calculation result is given by the internal algorithm.</p>\n<p>When set to <code class="codespan">Array</code>, it means that the curveness array is directly specified, and the multilateral curveness is directly selected from the array.</p>\n<p><strong>Notice：</strong> if <a href="#series-graph.lineStyle.curveness">lineStyle.curveness</a> has been set, this property is invalid.</p>\n',
    )
    data: Optional[List[Datum32]] = Field(
        None,
        description='<p>Nodes list of graph.</p>\n<pre><code class="lang-ts">data: [{\n    name: &#39;1&#39;,\n    x: 10,\n    y: 10,\n    value: 10\n}, {\n    name: &#39;2&#39;,\n    x: 100,\n    y: 100,\n    value: 20,\n    symbolSize: 20,\n    itemStyle: {\n        color: &#39;red&#39;\n    }\n}]\n</code></pre>\n',
    )
    nodes: Optional[Any] = Field(
        None, description='<p>Alias of <a href="#series-graph.data">data</a></p>\n'
    )
    links: Optional[List[Link]] = Field(
        None,
        description='<p>Relational data between nodes. Example:</p>\n<pre><code class="lang-ts">links: [{\n    source: &#39;n1&#39;,\n    target: &#39;n2&#39;\n}, {\n    source: &#39;n2&#39;,\n    target: &#39;n3&#39;\n}]\n</code></pre>\n',
    )
    edges: Optional[Any] = Field(
        None, description='<p>Alias of <a href="#series-graph.links">links</a></p>\n'
    )
    markPoint: Optional[MarkPoint10] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine10] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea10] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        'center',
        description='<p>Distance between  component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        'middle',
        description='<p>Distance between  component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        'auto',
        description='<p>Distance between  component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n<p>Adaptive by default.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        'auto', description='<p>Width of  component. </p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        'auto', description='<p>Height of  component. </p>\n'
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    tooltip: Optional[Tooltip29] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName436(_StyleName3):
    pass


class Rich436(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName436] = Field(
        None, alias='<style_name>', description=''
    )


class Label395(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich436] = Field(
        None,
        description='<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',
    )


class ItemStyle294(HandleStyle1):
    pass


class LineStyle255(BaseModel):
    color: Optional[Any] = Field(
        '"\'#314656\'"',
        description='<p>The color of the edge in Sankey diagram.</p>\n<ul>\n<li><code class="codespan">&#39;source&#39;</code>: use source node color.</li>\n<li><code class="codespan">&#39;target&#39;</code>: use target node color.</li>\n<li><code class="codespan">&#39;gradient&#39;</code>: gradient color between source node and target node (supported in 5.0).</li>\n</ul>\n',
    )
    opacity: Optional[float] = Field(
        0.2, description='<p>The opacity of the edge in Sankey diagram.</p>\n'
    )
    curveness: Optional[float] = Field(
        0.5, description='\n\n<p>The curveness of the edge in Sankey diagram.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )


class _StyleName437(_StyleName3):
    pass


class Rich437(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName437] = Field(
        None, alias='<style_name>', description=''
    )


class Label396(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich437] = Field(
        None,
        description='<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',
    )


class ItemStyle295(ItemStyle15):
    pass


class LineStyle256(LineStyle255):
    pass


class Emphasis137(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label396] = Field(None, description='')
    itemStyle: Optional[ItemStyle295] = Field(None, description='')
    lineStyle: Optional[LineStyle256] = Field(None, description='')


class _StyleName438(_StyleName3):
    pass


class Rich438(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName438] = Field(
        None, alias='<style_name>', description=''
    )


class Label397(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich438] = Field(
        None,
        description='<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',
    )


class ItemStyle296(HandleStyle1):
    pass


class LineStyle257(LineStyle255):
    pass


class Blur111(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    label: Optional[Label397] = Field(None, description='')
    itemStyle: Optional[ItemStyle296] = Field(None, description='')
    lineStyle: Optional[LineStyle257] = Field(None, description='')


class _StyleName439(_StyleName3):
    pass


class Rich439(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName439] = Field(
        None, alias='<style_name>', description=''
    )


class Label398(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich439] = Field(
        None,
        description='<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',
    )


class ItemStyle297(HandleStyle1):
    pass


class LineStyle258(LineStyle255):
    pass


class Select36(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label398] = Field(None, description='')
    itemStyle: Optional[ItemStyle297] = Field(None, description='')
    lineStyle: Optional[LineStyle258] = Field(None, description='')


class Level2(BaseModel):
    depth: Optional[float] = Field(
        None,
        description='\n\n<p>Specify which layer is set, value starts from 0.</p>\n',
    )
    label: Optional[Label395] = Field(None, description='')
    itemStyle: Optional[ItemStyle294] = Field(None, description='')
    lineStyle: Optional[LineStyle255] = Field(None, description='')
    emphasis: Optional[Emphasis137] = Field(None, description='')
    blur: Optional[Blur111] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )
    select: Optional[Select36] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class _StyleName440(_StyleName3):
    pass


class Rich440(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName440] = Field(
        None, alias='<style_name>', description=''
    )


class Label399(BaseModel):
    """
    <p><code class="codespan">label</code> describes the text label style in each rectangular node.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'right',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich440] = Field(
        None,
        description='<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',
    )


class LabelLayout13(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class Decal16(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle298(BaseModel):
    """
    <p>The style of node rectangle in Sankey diagram.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        '#aaa',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        1,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal16] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class LineStyle259(LineStyle255):
    """
    <p>The edge style of Sankey diagram</p>

    """

    pass


class _StyleName441(_StyleName3):
    pass


class Rich441(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName441] = Field(
        None, alias='<style_name>', description=''
    )


class Label400(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich441] = Field(
        None,
        description='<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',
    )


class ItemStyle299(ItemStyle15):
    pass


class LineStyle260(LineStyle255):
    pass


class Emphasis138(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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<ul>\n<li><code class="codespan">&#39;adjacency&#39;</code> Focus on the elements of adjacent nodes and edges in the graph.</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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label400] = Field(None, description='')
    itemStyle: Optional[ItemStyle299] = Field(None, description='')
    lineStyle: Optional[LineStyle260] = Field(None, description='')


class _StyleName442(_StyleName3):
    pass


class Rich442(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName442] = Field(
        None, alias='<style_name>', description=''
    )


class Label401(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich442] = Field(
        None,
        description='<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',
    )


class ItemStyle300(HandleStyle1):
    pass


class LineStyle261(LineStyle255):
    pass


class Blur112(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-sankey.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    label: Optional[Label401] = Field(None, description='')
    itemStyle: Optional[ItemStyle300] = Field(None, description='')
    lineStyle: Optional[LineStyle261] = Field(None, description='')


class _StyleName443(_StyleName3):
    pass


class Rich443(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName443] = Field(
        None, alias='<style_name>', description=''
    )


class Label402(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich443] = Field(
        None,
        description='<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',
    )


class ItemStyle301(HandleStyle1):
    pass


class LineStyle262(LineStyle255):
    pass


class Select37(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of selected state. Available when <a href="#series-sankey.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label402] = Field(None, description='')
    itemStyle: Optional[ItemStyle301] = Field(None, description='')
    lineStyle: Optional[LineStyle262] = Field(None, description='')


class Decal17(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle302(BaseModel):
    """
    <p>The style of this node.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal17] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class _StyleName444(_StyleName3):
    pass


class Rich444(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName444] = Field(
        None, alias='<style_name>', description=''
    )


class Label403(BaseModel):
    """
    <p>The lable style of this node.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich444] = Field(
        None,
        description='<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',
    )


class _StyleName445(_StyleName3):
    pass


class Rich445(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName445] = Field(
        None, alias='<style_name>', description=''
    )


class Label404(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich445] = Field(
        None,
        description='<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',
    )


class Decal18(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle303(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Since 5.2.0, it can be 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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal18] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class Emphasis139(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label404] = Field(None, description='')
    itemStyle: Optional[ItemStyle303] = Field(None, description='')


class _StyleName446(_StyleName3):
    pass


class Rich446(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName446] = Field(
        None, alias='<style_name>', description=''
    )


class Label405(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich446] = Field(
        None,
        description='<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',
    )


class Decal19(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle304(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal19] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class Blur113(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    label: Optional[Label405] = Field(None, description='')
    itemStyle: Optional[ItemStyle304] = Field(None, description='')


class _StyleName447(_StyleName3):
    pass


class Rich447(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName447] = Field(
        None, alias='<style_name>', description=''
    )


class Label406(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich447] = Field(
        None,
        description='<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',
    )


class Decal20(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle305(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal20] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class Select38(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label406] = Field(None, description='')
    itemStyle: Optional[ItemStyle305] = Field(None, description='')


class TextStyle44(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip30(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle44] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum34(BaseModel):
    name: Optional[str] = Field(None, description='<p>The name of the node.</p>\n')
    value: Optional[float] = Field(
        None,
        description='<p>The value of the node, which can used to determine the height of the node in horizontal orient or width in the vertical orient.</p>\n',
    )
    depth: Optional[float] = Field(
        None, description='<p>The layer of the node, value starts from 0.</p>\n'
    )
    itemStyle: Optional[ItemStyle302] = Field(
        None, description='<p>The style of this node.</p>\n'
    )
    label: Optional[Label403] = Field(
        None, description='<p>The lable style of this node.</p>\n'
    )
    emphasis: Optional[Emphasis139] = Field(None, description='')
    blur: Optional[Blur113] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )
    select: Optional[Select38] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )
    tooltip: Optional[Tooltip30] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class LineStyle263(LineStyle255):
    """
    <p>The line stlye of edge.</p>

    """

    pass


class LineStyle264(LineStyle255):
    pass


class Emphasis140(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle264] = Field(None, description='')


class LineStyle265(LineStyle255):
    pass


class Blur114(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle265] = Field(None, description='')


class LineStyle266(LineStyle255):
    pass


class Select39(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle266] = Field(None, description='')


class Link1(BaseModel):
    source: Optional[str] = Field(
        None,
        description='<p>The <a href="#series-sankey.data.name">name of source node</a> of edge</p>\n',
    )
    target: Optional[str] = Field(
        None,
        description='<p>The <a href="#series-sankey.data.name">name of target node</a> of edge</p>\n',
    )
    value: Optional[float] = Field(
        None, description='<p>The value of edge, which decides the width of edge.</p>\n'
    )
    lineStyle: Optional[LineStyle263] = Field(
        None, description='<p>The line stlye of edge.</p>\n'
    )
    emphasis: Optional[Emphasis140] = Field(None, description='')
    blur: Optional[Blur114] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )
    select: Optional[Select39] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class TextStyle45(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip31(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle45] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series17(BaseModel):
    """
        <p><strong> Sankey diagram </strong>
    Sankey diagram is a specific type of streamgraph (can also be seen as a directed acyclic graph) in which the width of each branch is shown proportionally to the flow quantity. These graphs are typically used to visualize energy or material or cost transfers between processes. They can also visualize the energy accounts, material flow accounts on a regional or national level, and also the breakdown of cost of item or services.</p>
    <p><strong>Example: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=sankey-energy&edit=1&reset=1" width="700" height="580"></iframe>



    <p><br>
    <strong>Visual Encoding: </strong></p>
    <p>The Sankey diagram encodes each <code class="codespan">node</code> of the raw data into a small rectangle. Different nodes are presented in different colors as far as possible. The <code class="codespan">label</code> next to the small rectangle encodes the name of the node.</p>
    <p>In addition, the edge between two small rectangles in the diagram encodes the <code class="codespan">link</code> of the raw data. The width of edge is shown proportionally to the <code class="codespan">value</code> of <code class="codespan">link</code>.</p>

    """

    type: Optional[str] = Field('sankey', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between sankey component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between sankey component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        '20%',
        description='<p>Distance between sankey component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between sankey component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        None, description='<p>Width of sankey component. </p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        None, description='<p>Height of sankey component. </p>\n'
    )
    nodeWidth: Optional[float] = Field(
        20, description='\n\n<p>The node width of rectangle in Sankey diagram.</p>\n'
    )
    nodeGap: Optional[float] = Field(
        8,
        description='\n\n<p>The gap between any two rectangles in each column of the Sankey diagram.</p>\n',
    )
    nodeAlign: Optional[str] = Field(
        'justify',
        description='\n\n<p>Controls the horizontal alignment of nodes in the diagram.</p>\n<p>May be:</p>\n<ul>\n<li><p><code class="codespan">left</code>: initial nodes (those with no incoming links) are aligned to the left of the diagram.</p>\n</li>\n<li><p><code class="codespan">right</code>: terminal nodes (those with no outgoing links) are aligned to the right of the diagram.</p>\n</li>\n<li><p><code class="codespan">justify</code>: initial and terminal nodes are aligned on the left and right edges.</p>\n</li>\n</ul>\n<p>Note when <a href="#series-sankey.orient">orient</a> is <code class="codespan">vertical</code>, <code class="codespan">nodeAlign</code> controls vertical alignment.</p>\n',
    )
    layoutIterations: Optional[float] = Field(
        32,
        description='\n\n<p>The iterations of layout, which is used to iteratively optimize the position of the nodes and edges in the Sankey diagram to reduce the overlapping between nodes and edges. The default value is <code class="codespan">32</code>. If you want the order of the nodes in the chart to be the same with the order in the original <a href="#series-sankey.data">data</a>, you can set the value to be <code class="codespan">0</code>.</p>\n',
    )
    orient: Optional[str] = Field(
        'horizontal',
        description='\n\n<p>The layout direction of the nodes in the Sankey diagram, which can be horizontal from left to right or vertical from top to bottom. The corresponding parameter values \u200b\u200bare <code class="codespan">horizontal</code> or <code class="codespan">vertical</code>.</p>\n',
    )
    draggable: Optional[bool] = Field(
        True,
        description='\n\n<p>The drag-and-drop interaction of the node, which is enabled by default. After opening, the user can drag any node in the Sankey diagram to any position. To turn this interaction off, simply set the value to <code class="codespan">false</code>.</p>\n',
    )
    levels: Optional[List[Level2]] = Field(
        None,
        description='<p>The setting of each layer of Sankey diagram. Can be set layer by layer, as follows:</p>\n<pre><code class="lang-ts">levels: [{\n    depth: 0,\n    itemStyle: {\n        color: &#39;#fbb4ae&#39;\n    },\n    lineStyle: {\n        color: &#39;source&#39;,\n        opacity: 0.6\n    }\n}, {\n    depth: 1,\n    itemStyle: {\n        color: &#39;#b3cde3&#39;\n    },\n    lineStyle: {\n        color: &#39;source&#39;,\n        opacity: 0.6\n    }\n}]\n</code></pre>\n<p>You can also only set a certain layer:</p>\n<pre><code class="lang-ts">levels: [{\n    depth: 3,\n    itemStyle: {\n        color: &#39;#fbb4ae&#39;\n    },\n    lineStyle: {\n        color: &#39;source&#39;,\n        opacity: 0.6\n    }\n}]\n</code></pre>\n',
    )
    label: Optional[Label399] = Field(
        None,
        description='<p><code class="codespan">label</code> describes the text label style in each rectangular node.</p>\n',
    )
    labelLayout: Optional[LabelLayout13] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle298] = Field(
        None, description='<p>The style of node rectangle in Sankey diagram.</p>\n'
    )
    lineStyle: Optional[LineStyle259] = Field(
        None, description='<p>The edge style of Sankey diagram</p>\n'
    )
    emphasis: Optional[Emphasis138] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur112] = Field(
        None,
        description='<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-sankey.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select37] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of selected state. Available when <a href="#series-sankey.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    data: Optional[List[Datum34]] = Field(
        None,
        description='<p>The nodes list of the sankey diagram.</p>\n<pre><code class="lang-ts">data: [{\n    name: &#39;node1&#39;,\n    // This attribute decides the layer of the current node.\n    depth: 0\n}, {\n    name: &#39;node2&#39;,\n    depth: 1\n}]\n</code></pre>\n<p><strong>Notice:</strong> The name of the node cannot be repeated.</p>\n',
    )
    nodes: Optional[Any] = Field(
        None, description='<p>Equals to <a href="#series-sankey.data">data</a></p>\n'
    )
    links: Optional[List[Link1]] = Field(
        None,
        description='<p>The links between nodes. <strong>Notes: The Sankey diagram theoretically only supports Directed Acyclic Graph(DAG), so please make sure that there is no cycle in the links.</strong> For instance:</p>\n<pre><code class="lang-ts">links: [{\n    source: &#39;n1&#39;,\n    target: &#39;n2&#39;\n}, {\n    source: &#39;n2&#39;,\n    target: &#39;n3&#39;\n}]\n</code></pre>\n',
    )
    edges: Optional[Any] = Field(
        None, description='<p>Equals to <a href="#series-sankey.links">links</a></p>\n'
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'linear',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    tooltip: Optional[Tooltip31] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName448(_StyleName):
    pass


class Rich448(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName448] = Field(
        None, alias='<style_name>', description=''
    )


class Label407(BaseModel):
    """
    <p>Text label of funnel chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(False, description='')
    position: Optional[str] = Field(
        'outside',
        description='<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class="codespan">&#39;left&#39;</code>Left side of funnel chart. Available when <a href="#series-funnel.orient">orient</a> is <code class="codespan">&#39;vertical&#39;</code>.</li>\n<li><code class="codespan">&#39;right&#39;</code> Right side of funnel chart. Available when <a href="#series-funnel.orient">orient</a> is <code class="codespan">&#39;horizontal&#39;</code>.</li>\n<li><code class="codespan">&#39;top&#39;</code> Top side of funnel chart. Available when <a href="#series-funnel.orient">orient</a> is <code class="codespan">&#39;vertical&#39;</code>.</li>\n<li><code class="codespan">&#39;bottom&#39;</code> Bottom side of funnel chart. Available when <a href="#series-funnel.orient">orient</a> is <code class="codespan">&#39;vertical&#39;</code>.</li>\n<li><code class="codespan">&#39;inside&#39;</code>Inside the trapezoid of funnel chart.</li>\n<li><code class="codespan">&#39;insideRight&#39;</code>Right inside the trapezoid of funnel chart.</li>\n<li><code class="codespan">&#39;insideLeft&#39;</code>Left inside the trapezoid of funnel chart.</li>\n<li><code class="codespan">&#39;leftTop&#39;</code>Top-left of funnel chart.</li>\n<li><code class="codespan">&#39;leftBottom&#39;</code>Bottom-left of funnel chart.</li>\n<li><code class="codespan">&#39;rightTop&#39;</code>Top-right side of funnel chart.</li>\n<li><code class="codespan">&#39;rightBottom&#39;</code>Bottom-right side of funnel chart.</li>\n<li><code class="codespan">&#39;inner&#39;</code> equals to <code class="codespan">&#39;inside&#39;</code>.</li>\n<li><code class="codespan">&#39;center&#39;</code> equals to <code class="codespan">&#39;inside&#39;</code>.</li>\n</ul>\n<p><a href="#series-funnel.labelLine">labelLine</a> can be used to guide to the corresponding trapezoid when label is not inside.</p>\n',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich448] = Field(
        None,
        description='<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',
    )


class LineStyle267(LineStyle51):
    pass


class LabelLine63(BaseModel):
    """
    <p>The visual guide line style of label. When <a href="#series-funnel.label.position">label position</a> is set as <code class="codespan">&#39;left&#39;</code>or<code class="codespan">&#39;right&#39;</code>, the visual guide line will show.</p>

    """

    show: Optional[bool] = Field(
        None, description='<p>Whether to show visual guide line.</p>\n'
    )
    length: Optional[float] = Field(
        None,
        description='<p>The length of the first part from visual guide line.</p>\n',
    )
    lineStyle: Optional[LineStyle267] = Field(None, description='')


class Decal21(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle306(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Union[Any, Any]] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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<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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal21] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class LabelLayout14(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class _StyleName449(_StyleName):
    pass


class Rich449(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName449] = Field(
        None, alias='<style_name>', description=''
    )


class Label408(BaseModel):
    show: Optional[bool] = Field(False, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich449] = Field(
        None,
        description='<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',
    )


class LineStyle268(LineStyle51):
    pass


class LabelLine64(BaseModel):
    show: Optional[bool] = Field(
        None, description='<p>Whether to show visual guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle268] = Field(None, description='')


class ItemStyle307(ItemStyle15):
    pass


class Emphasis141(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label408] = Field(None, description='')
    labelLine: Optional[LabelLine64] = Field(None, description='')
    itemStyle: Optional[ItemStyle307] = Field(None, description='')


class _StyleName450(_StyleName):
    pass


class Rich450(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName450] = Field(
        None, alias='<style_name>', description=''
    )


class Label409(BaseModel):
    show: Optional[bool] = Field(False, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich450] = Field(
        None,
        description='<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',
    )


class LineStyle269(LineStyle51):
    pass


class LabelLine65(BaseModel):
    show: Optional[bool] = Field(
        None, description='<p>Whether to show visual guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle269] = Field(None, description='')


class ItemStyle308(HandleStyle1):
    pass


class Blur115(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-funnel.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    label: Optional[Label409] = Field(None, description='')
    labelLine: Optional[LabelLine65] = Field(None, description='')
    itemStyle: Optional[ItemStyle308] = Field(None, description='')


class _StyleName451(_StyleName):
    pass


class Rich451(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName451] = Field(
        None, alias='<style_name>', description=''
    )


class Label410(BaseModel):
    show: Optional[bool] = Field(False, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich451] = Field(
        None,
        description='<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',
    )


class LineStyle270(LineStyle51):
    pass


class LabelLine66(BaseModel):
    show: Optional[bool] = Field(
        None, description='<p>Whether to show visual guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle270] = Field(None, description='')


class ItemStyle309(HandleStyle1):
    pass


class Select40(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-funnel.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label410] = Field(None, description='')
    labelLine: Optional[LabelLine66] = Field(None, description='')
    itemStyle: Optional[ItemStyle309] = Field(None, description='')


class Decal22(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle310(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    height: Optional[Union[str, float]] = Field(
        None,
        description='<p>Height of this data item. By default, the height is evenly divided for all data items. The height can be set to percentage (e.g.: &#39;10%&#39;) or pixel value (e.g.: 20). Please make sure that the total height of all data items is 100%.</p>\n',
    )
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal22] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class _StyleName452(_StyleName):
    pass


class Rich452(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName452] = Field(
        None, alias='<style_name>', description=''
    )


class Label411(BaseModel):
    """
    <p>The label configuration of a single data item.</p>

    """

    show: Optional[bool] = Field(False, description='')
    position: Optional[str] = Field(
        'outside',
        description='<p>Label position.</p>\n<p><strong>Options: </strong></p>\n<ul>\n<li><code class="codespan">&#39;left&#39;</code>Left side of funnel chart. Available when <a href="#series-funnel.orient">orient</a> is <code class="codespan">&#39;vertical&#39;</code>.</li>\n<li><code class="codespan">&#39;right&#39;</code> Right side of funnel chart. Available when <a href="#series-funnel.orient">orient</a> is <code class="codespan">&#39;horizontal&#39;</code>.</li>\n<li><code class="codespan">&#39;top&#39;</code> Top side of funnel chart. Available when <a href="#series-funnel.orient">orient</a> is <code class="codespan">&#39;vertical&#39;</code>.</li>\n<li><code class="codespan">&#39;bottom&#39;</code> Bottom side of funnel chart. Available when <a href="#series-funnel.orient">orient</a> is <code class="codespan">&#39;vertical&#39;</code>.</li>\n<li><code class="codespan">&#39;inside&#39;</code>Inside the trapezoid of funnel chart.</li>\n<li><code class="codespan">&#39;insideRight&#39;</code>Right inside the trapezoid of funnel chart.</li>\n<li><code class="codespan">&#39;insideLeft&#39;</code>Left inside the trapezoid of funnel chart.</li>\n<li><code class="codespan">&#39;leftTop&#39;</code>Top-left of funnel chart.</li>\n<li><code class="codespan">&#39;leftBottom&#39;</code>Bottom-left of funnel chart.</li>\n<li><code class="codespan">&#39;rightTop&#39;</code>Top-right side of funnel chart.</li>\n<li><code class="codespan">&#39;rightBottom&#39;</code>Bottom-right side of funnel chart.</li>\n<li><code class="codespan">&#39;inner&#39;</code> equals to <code class="codespan">&#39;inside&#39;</code>.</li>\n<li><code class="codespan">&#39;center&#39;</code> equals to <code class="codespan">&#39;inside&#39;</code>.</li>\n</ul>\n<p><a href="#series-funnel.labelLine">labelLine</a> can be used to guide to the corresponding trapezoid when label is not inside.</p>\n',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich452] = Field(
        None,
        description='<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',
    )


class LineStyle271(LineStyle51):
    pass


class LabelLine67(BaseModel):
    show: Optional[bool] = Field(
        None, description='<p>Whether to show visual guide line.</p>\n'
    )
    length: Optional[float] = Field(
        None,
        description='<p>The length of the first part from visual guide line.</p>\n',
    )
    lineStyle: Optional[LineStyle271] = Field(None, description='')


class _StyleName453(_StyleName):
    pass


class Rich453(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName453] = Field(
        None, alias='<style_name>', description=''
    )


class Label412(BaseModel):
    show: Optional[bool] = Field(False, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich453] = Field(
        None,
        description='<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',
    )


class LineStyle272(LineStyle51):
    pass


class LabelLine68(BaseModel):
    show: Optional[bool] = Field(
        None, description='<p>Whether to show visual guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle272] = Field(None, description='')


class ItemStyle311(ItemStyle15):
    pass


class Emphasis142(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label412] = Field(None, description='')
    labelLine: Optional[LabelLine68] = Field(None, description='')
    itemStyle: Optional[ItemStyle311] = Field(None, description='')


class _StyleName454(_StyleName):
    pass


class Rich454(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName454] = Field(
        None, alias='<style_name>', description=''
    )


class Label413(BaseModel):
    show: Optional[bool] = Field(False, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich454] = Field(
        None,
        description='<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',
    )


class LineStyle273(LineStyle51):
    pass


class LabelLine69(BaseModel):
    show: Optional[bool] = Field(
        None, description='<p>Whether to show visual guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle273] = Field(None, description='')


class ItemStyle312(HandleStyle1):
    pass


class Blur116(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    label: Optional[Label413] = Field(None, description='')
    labelLine: Optional[LabelLine69] = Field(None, description='')
    itemStyle: Optional[ItemStyle312] = Field(None, description='')


class _StyleName455(_StyleName):
    pass


class Rich455(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName455] = Field(
        None, alias='<style_name>', description=''
    )


class Label414(BaseModel):
    show: Optional[bool] = Field(False, description='')
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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    // percentage\n    percent: number\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',
    )
    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich455] = Field(
        None,
        description='<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',
    )


class LineStyle274(LineStyle51):
    pass


class LabelLine70(BaseModel):
    show: Optional[bool] = Field(
        None, description='<p>Whether to show visual guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle274] = Field(None, description='')


class ItemStyle313(HandleStyle1):
    pass


class Select41(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label414] = Field(None, description='')
    labelLine: Optional[LabelLine70] = Field(None, description='')
    itemStyle: Optional[ItemStyle313] = Field(None, description='')


class TextStyle46(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip32(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle46] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum35(BaseModel):
    name: Optional[str] = Field(None, description='<p>the name of data item.</p>\n')
    value: Optional[float] = Field(None, description='<p>data value.</p>\n')
    itemStyle: Optional[ItemStyle310] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    label: Optional[Label411] = Field(
        None, description='<p>The label configuration of a single data item.</p>\n'
    )
    labelLine: Optional[LabelLine67] = Field(None, description='')
    emphasis: Optional[Emphasis142] = Field(None, description='')
    blur: Optional[Blur116] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )
    select: Optional[Select41] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )
    tooltip: Optional[Tooltip32] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class _StyleName456(_StyleName3):
    pass


class Rich456(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName456] = Field(
        None, alias='<style_name>', description=''
    )


class Label415(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich456] = Field(
        None,
        description='<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',
    )


class ItemStyle314(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName457(_StyleName3):
    pass


class Rich457(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName457] = Field(
        None, alias='<style_name>', description=''
    )


class Label416(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich457] = Field(
        None,
        description='<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',
    )


class ItemStyle315(HandleStyle1):
    pass


class Emphasis143(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label416] = Field(None, description='')
    itemStyle: Optional[ItemStyle315] = Field(None, description='')


class _StyleName458(_StyleName3):
    pass


class Rich458(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName458] = Field(
        None, alias='<style_name>', description=''
    )


class Label417(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich458] = Field(
        None,
        description='<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',
    )


class ItemStyle316(HandleStyle1):
    pass


class Blur117(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label417] = Field(None, description='')
    itemStyle: Optional[ItemStyle316] = Field(None, description='')


class ItemStyle317(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName459(_StyleName3):
    pass


class Rich459(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName459] = Field(
        None, alias='<style_name>', description=''
    )


class Label418(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich459] = Field(
        None,
        description='<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',
    )


class _StyleName460(_StyleName3):
    pass


class Rich460(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName460] = Field(
        None, alias='<style_name>', description=''
    )


class Label419(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich460] = Field(
        None,
        description='<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',
    )


class ItemStyle318(HandleStyle1):
    pass


class Emphasis144(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label419] = Field(None, description='')
    itemStyle: Optional[ItemStyle318] = Field(None, description='')


class Datum36(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle317] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label418] = Field(None, description='')
    emphasis: Optional[Emphasis144] = Field(None, description='')


class MarkPoint11(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-funnel.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-funnel.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-funnel.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label415] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle314] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis143] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur117] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum36]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-funnel.markPoint.data.x">x</a>, <a href="#series-funnel.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName461(_StyleName3):
    pass


class Rich461(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName461] = Field(
        None, alias='<style_name>', description=''
    )


class Label420(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich461] = Field(
        None,
        description='<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',
    )


class LineStyle275(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName462(_StyleName3):
    pass


class Rich462(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName462] = Field(
        None, alias='<style_name>', description=''
    )


class Label421(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich462] = Field(
        None,
        description='<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',
    )


class LineStyle276(LineStyle51):
    pass


class Emphasis145(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label421] = Field(None, description='')
    lineStyle: Optional[LineStyle276] = Field(None, description='')


class _StyleName463(_StyleName3):
    pass


class Rich463(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName463] = Field(
        None, alias='<style_name>', description=''
    )


class Label422(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich463] = Field(
        None,
        description='<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',
    )


class LineStyle277(LineStyle51):
    pass


class Blur118(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label422] = Field(None, description='')
    lineStyle: Optional[LineStyle277] = Field(None, description='')


class LineStyle278(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName464(_StyleName3):
    pass


class Rich464(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName464] = Field(
        None, alias='<style_name>', description=''
    )


class Label423(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich464] = Field(
        None,
        description='<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',
    )


class LineStyle279(LineStyle60):
    pass


class _StyleName465(_StyleName3):
    pass


class Rich465(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName465] = Field(
        None, alias='<style_name>', description=''
    )


class Label424(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich465] = Field(
        None,
        description='<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',
    )


class Emphasis146(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle279] = Field(None, description='')
    label: Optional[Label424] = Field(None, description='')


class LineStyle280(LineStyle60):
    pass


class _StyleName466(_StyleName3):
    pass


class Rich466(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName466] = Field(
        None, alias='<style_name>', description=''
    )


class Label425(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich466] = Field(
        None,
        description='<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',
    )


class Blur119(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle280] = Field(None, description='')
    label: Optional[Label425] = Field(None, description='')


class Field022(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle278] = Field(
        None,
        description='<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',
    )
    label: Optional[Label423] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis146] = Field(None, description='')
    blur: Optional[Blur119] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle281(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName467(_StyleName3):
    pass


class Rich467(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName467] = Field(
        None, alias='<style_name>', description=''
    )


class Label426(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich467] = Field(
        None,
        description='<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',
    )


class LineStyle282(LineStyle60):
    pass


class _StyleName468(_StyleName3):
    pass


class Rich468(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName468] = Field(
        None, alias='<style_name>', description=''
    )


class Label427(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich468] = Field(
        None,
        description='<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',
    )


class Emphasis147(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle282] = Field(None, description='')
    label: Optional[Label427] = Field(None, description='')


class LineStyle283(LineStyle60):
    pass


class _StyleName469(_StyleName3):
    pass


class Rich469(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName469] = Field(
        None, alias='<style_name>', description=''
    )


class Label428(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich469] = Field(
        None,
        description='<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',
    )


class Blur120(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle283] = Field(None, description='')
    label: Optional[Label428] = Field(None, description='')


class Field122(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle281] = Field(
        None,
        description='<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',
    )
    label: Optional[Label426] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis147] = Field(None, description='')
    blur: Optional[Blur120] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data24(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-funnel.markLine.data.0.x">x</a>, <a href="#series-funnel.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field022] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field122] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine11(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-funnel.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label420] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle275] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis145] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur118] = Field(
        None,
        description='<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',
    )
    data: Optional[Data24] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-funnel.markLine.data.0.x">x</a>, <a href="#series-funnel.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n\n[\n        {\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName470(_StyleName3):
    pass


class Rich470(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName470] = Field(
        None, alias='<style_name>', description=''
    )


class Label429(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich470] = Field(
        None,
        description='<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',
    )


class ItemStyle319(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName471(_StyleName3):
    pass


class Rich471(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName471] = Field(
        None, alias='<style_name>', description=''
    )


class Label430(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich471] = Field(
        None,
        description='<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',
    )


class ItemStyle320(HandleStyle1):
    pass


class Emphasis148(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label430] = Field(None, description='')
    itemStyle: Optional[ItemStyle320] = Field(None, description='')


class _StyleName472(_StyleName3):
    pass


class Rich472(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName472] = Field(
        None, alias='<style_name>', description=''
    )


class Label431(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich472] = Field(
        None,
        description='<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',
    )


class ItemStyle321(HandleStyle1):
    pass


class Blur121(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label431] = Field(None, description='')
    itemStyle: Optional[ItemStyle321] = Field(None, description='')


class ItemStyle322(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName473(_StyleName3):
    pass


class Rich473(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName473] = Field(
        None, alias='<style_name>', description=''
    )


class Label432(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich473] = Field(
        None,
        description='<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',
    )


class ItemStyle323(HandleStyle1):
    pass


class _StyleName474(_StyleName3):
    pass


class Rich474(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName474] = Field(
        None, alias='<style_name>', description=''
    )


class Label433(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich474] = Field(
        None,
        description='<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',
    )


class Emphasis149(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle323] = Field(None, description='')
    label: Optional[Label433] = Field(None, description='')


class ItemStyle324(HandleStyle1):
    pass


class _StyleName475(_StyleName3):
    pass


class Rich475(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName475] = Field(
        None, alias='<style_name>', description=''
    )


class Label434(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich475] = Field(
        None,
        description='<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',
    )


class Blur122(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle324] = Field(None, description='')
    label: Optional[Label434] = Field(None, description='')


class Field023(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle322] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label432] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis149] = Field(None, description='')
    blur: Optional[Blur122] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle325(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName476(_StyleName3):
    pass


class Rich476(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName476] = Field(
        None, alias='<style_name>', description=''
    )


class Label435(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich476] = Field(
        None,
        description='<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',
    )


class ItemStyle326(HandleStyle1):
    pass


class _StyleName477(_StyleName3):
    pass


class Rich477(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName477] = Field(
        None, alias='<style_name>', description=''
    )


class Label436(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich477] = Field(
        None,
        description='<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',
    )


class Emphasis150(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle326] = Field(None, description='')
    label: Optional[Label436] = Field(None, description='')


class ItemStyle327(HandleStyle1):
    pass


class _StyleName478(_StyleName3):
    pass


class Rich478(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName478] = Field(
        None, alias='<style_name>', description=''
    )


class Label437(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich478] = Field(
        None,
        description='<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',
    )


class Blur123(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle327] = Field(None, description='')
    label: Optional[Label437] = Field(None, description='')


class Field123(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle325] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label435] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis150] = Field(None, description='')
    blur: Optional[Blur123] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data25(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-funnel.markArea.data.0.x">x</a>, <a href="#series-funnel.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field023] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field123] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea11(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label429] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle319] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis148] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur121] = Field(
        None,
        description='<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',
    )
    data: Optional[Data25] = Field(
        None,
        description='<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-funnel.markArea.data.0.x">x</a>, <a href="#series-funnel.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code 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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition10(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class TextStyle47(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip33(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle47] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series18(BaseModel):
    """
        <p><strong>Funnel chart</strong></p>
    <p><strong>sample: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=funnel&reset=1&edit=1" width="600" height="400"></iframe>


    """

    type: Optional[str] = Field('funnel', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'data',
        description='\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',
    )
    min: Optional[float] = Field(
        0, description='\n\n<p>The specified minimum value.</p>\n'
    )
    max: Optional[float] = Field(
        100, description='\n\n<p>The specified maximum value.</p>\n'
    )
    minSize: Optional[Union[float, str]] = Field(
        '0%',
        description='\n\n<p>The mapped width from minimum data value <a href="#series-funnel.min">min</a>.</p>\n<p>It can be absolute pixel and also the percentage of <a href="#series-funnel.width">layout width</a>. If you don&#39;t want the graph of minimum value to be a triangle, you can set up this property larger than 0.</p>\n',
    )
    maxSize: Optional[Union[float, str]] = Field(
        '100%',
        description='\n\n<p>The mapped width from maximum data value <a href="#series-funnel.max">max</a>.</p>\n<p>It can be absolute pixel and also the percentage of <a href="#series-funnel.width">layout width</a>.</p>\n',
    )
    orient: Optional[str] = Field(
        'vertical',
        description='\n\n<p>Orient of funnel，Can be <code class="codespan">&#39;vertical&#39;</code> or <code class="codespan">&#39;horizontal&#39;</code>.</p>\n<blockquote>\n<p>Since <code class="codespan">v4.9.0</code></p>\n</blockquote>\n',
    )
    sort: Optional[Union[str, Any]] = Field(
        'descending',
        description='\n\n<p>Data sorting, which can be whether <code class="codespan">&#39;ascending&#39;</code>, <code class="codespan">&#39;descending&#39;</code>, <code class="codespan">&#39;none&#39;</code>(in data order) or a function, which is the same as <code class="codespan">Array.prototype.sort(function (a, b) { ... })</code>;</p>\n',
    )
    gap: Optional[float] = Field(
        0, description='\n\n<p>Gap between each trapezoid.</p>\n'
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    funnelAlign: Optional[str] = Field(
        'center',
        description='\n\n<p>Horizontal align. Defaults to align center. Can be &#39;left&#39;, &#39;right&#39;, &#39;center&#39;.</p>\n',
    )
    label: Optional[Label407] = Field(
        None,
        description='<p>Text label of funnel chart, to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine63] = Field(
        None,
        description='<p>The visual guide line style of label. When <a href="#series-funnel.label.position">label position</a> is set as <code class="codespan">&#39;left&#39;</code>or<code class="codespan">&#39;right&#39;</code>, the visual guide line will show.</p>\n',
    )
    itemStyle: Optional[ItemStyle306] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    labelLayout: Optional[LabelLayout14] = Field(
        None,
        description='<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',
    )
    emphasis: Optional[Emphasis141] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur115] = Field(
        None,
        description='<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-funnel.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select40] = Field(
        None,
        description='<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-funnel.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        80,
        description='<p>Distance between Funnel component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        60,
        description='<p>Distance between Funnel component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        80,
        description='<p>Distance between Funnel component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        60,
        description='<p>Distance between Funnel component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        'auto', description='<p>Width of Funnel component. Adaptive by default.</p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        'auto', description='<p>Height of Funnel component. Adaptive by default.</p>\n'
    )
    seriesLayoutBy: Optional[str] = Field(
        'column',
        description='<p>When <a href="#dataset">dataset</a> is used, <code class="codespan">seriesLayoutBy</code> specifies whether the column or the row of <code class="codespan">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class="codespan">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：the rows of <code class="codespan">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href="http://localhost/echarts-website/examples/en/editor.html?c=dataset-series-layout-by" target="_blank">example</a>.</p>\n',
    )
    datasetIndex: Optional[float] = Field(
        0,
        description='<p>If <a href="#series.data">series.data</a> is not specified, and <a href="#dataset">dataset</a> exists, the series will use <code class="codespan">dataset</code>. <code class="codespan">datasetIndex</code> specifies which dataset will be used.</p>\n',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum35]] = Field(
        None,
        description='<p>Data array of  series, which can be a single data value, like:</p>\n<pre><code class="lang-ts">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href="#visualMap">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class="lang-ts">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href="#visualMap">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class="lang-ts">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class="lang-ts">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n',
    )
    markPoint: Optional[MarkPoint11] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine11] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea11] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition10] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip33] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName479(_StyleName):
    pass


class Rich479(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName479] = Field(
        None, alias='<style_name>', description=''
    )


class Title4(BaseModel):
    """
    <p>The title of gauge chart.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the title.</p>\n'
    )
    offsetCenter: Optional[Any] = Field(
        "[0, '20%']",
        description='\n\n<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n',
    )
    color: Optional[Any] = Field('#464646', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(16, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich479] = Field(
        None,
        description='<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',
    )
    valueAnimation: Optional[bool] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to enable text animation of value change.</p>\n',
    )


class _StyleName480(_StyleName):
    pass


class Rich480(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName480] = Field(
        None, alias='<style_name>', description=''
    )


class Detail(BaseModel):
    """
    <p>The detail about gauge chart which is used to show data.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the details.</p>\n'
    )
    color: Optional[Any] = Field(
        '#464646',
        description='\n\n<p>The text color. Defaults to use <a href="#series-gauge.axisLine.lineStyle.color">the color of section</a> where the numerical value belongs to.</p>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'bold',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(30, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        30,
        description='\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',
    )
    backgroundColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>The background color of detail.</p>\n'
    )
    borderColor: Optional[Any] = Field(
        '#ccc', description='\n\n<p>The border color of detail.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>The border width of detail.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(100, description='\n\n<p>The width of detail.</p>\n')
    height: Optional[float] = Field(
        40, description='\n\n<p>The height of detail.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich480] = Field(
        None,
        description='<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',
    )
    valueAnimation: Optional[bool] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to enable text animation of value change.</p>\n',
    )
    offsetCenter: Optional[Any] = Field(
        "[0, '40%']",
        description='\n\n<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n',
    )
    formatter: Optional[Union[Any, str]] = Field(
        None,
        description='<p>Formatter is used to format detail, which supports string template and callback function.</p>\n<pre><code class="lang-ts">formatter: function (value) {\n    return value.toFixed(0);\n}\n</code></pre>\n',
    )


class Decal23(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle328(BaseModel):
    """
    <p>The style of data pointer.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal23] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class Datum37(BaseModel):
    title: Optional[Title4] = Field(
        None, description='<p>The title of gauge chart.</p>\n'
    )
    detail: Optional[Detail] = Field(
        None,
        description='<p>The detail about gauge chart which is used to show data.</p>\n',
    )
    name: Optional[str] = Field(None, description='<p>Data name.</p>\n')
    value: Optional[float] = Field(None, description='\n\n<p>Data value.</p>\n')
    itemStyle: Optional[ItemStyle328] = Field(
        None, description='<p>The style of data pointer.</p>\n'
    )


class LineStyle284(BaseModel):
    """
    <p>The style of the axis line of gauge chart.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='<p>The axis line of gauge chart can be divided to several segments in different colors. The end position and color of each segment can be expressed by an array.</p>\n<p>Default value:</p>\n<pre><code class="lang-ts">[[1, &#39;#E6EBF8&#39;]]\n</code></pre>\n<p>Note: The value of <code class="codespan">color[i][0]</code> means the percentage of the axis line of the gauge chart&#39;s segments, which should be between 0 and 1, and <code class="codespan">color[i][1]</code> is the corresponding color.</p>\n<pre><code class="lang-js">color: [\n    [0.1, &#39;red&#39;], // 0~10% is red\n    [0.2, &#39;green&#39;], // 10~20% is green\n    [0.3, &#39;blue&#39;], // 20~30% is blue\n    // ...\n]\n</code></pre>\n',
    )
    width: Optional[float] = Field(10, description='<p>The width of axis line.</p>\n')
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AxisLine8(BaseModel):
    """
    <p>The related configuration about the axis line of gauge chart.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the axis line of gauge chart.</p>\n'
    )
    roundCap: Optional[bool] = Field(
        False,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to add round caps at the end.</p>\n',
    )
    lineStyle: Optional[LineStyle284] = Field(
        None, description='<p>The style of the axis line of gauge chart.</p>\n'
    )


class ItemStyle329(HandleStyle1):
    """
    <p>The style of progress.</p>

    """

    pass


class Progress1(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0</code></p>
    </blockquote>
    <p>Used to show current progress.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show the progress of gauge chart.</p>\n'
    )
    overlap: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether the progress overlaps when there are multiple groups of data.</p>\n',
    )
    width: Optional[float] = Field(
        10, description='\n\n<p>The width of progress.</p>\n'
    )
    roundCap: Optional[bool] = Field(
        False, description='<p>Whether to add round caps at the end</p>\n'
    )
    clip: Optional[bool] = Field(
        False, description='<p>Whether to clip overflow.</p>\n'
    )
    itemStyle: Optional[ItemStyle329] = Field(
        None, description='<p>The style of progress.</p>\n'
    )


class LineStyle285(BaseModel):
    color: Optional[Any] = Field(
        '#63677A',
        description='\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',
    )
    width: Optional[float] = Field(3, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class SplitLine7(BaseModel):
    """
    <p>The style of split line.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the split line.</p>\n'
    )
    length: Optional[Union[float, str]] = Field(
        10,
        description='\n\n<p>The length of split line, can be a pecentage value relative to radius.</p>\n',
    )
    distance: Optional[float] = Field(
        10,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0</code></p>\n</blockquote>\n\n\n<p>The distance between the split line and axis line.</p>\n',
    )
    lineStyle: Optional[LineStyle285] = Field(None, description='')


class LineStyle286(BaseModel):
    color: Optional[Any] = Field(
        '#63677A',
        description='\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',
    )
    width: Optional[float] = Field(1, description='\n\n<p> line width.</p>\n')
    type: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    dashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    cap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    join: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    miterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )


class AxisTick8(BaseModel):
    """
    <p>The tick line style.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the scale.</p>\n'
    )
    splitNumber: Optional[float] = Field(
        5, description='\n\n<p>The split scale number between split line.</p>\n'
    )
    length: Optional[Union[float, str]] = Field(
        6,
        description='\n\n<p>The length of tick line, can be a pecentage value relative to radius.</p>\n',
    )
    distance: Optional[float] = Field(
        10,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0</code></p>\n</blockquote>\n\n\n<p>The distance between the tick line and axis line.</p>\n',
    )
    lineStyle: Optional[LineStyle286] = Field(None, description='')


class _StyleName481(_StyleName):
    pass


class Rich481(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName481] = Field(
        None, alias='<style_name>', description=''
    )


class AxisLabel8(BaseModel):
    """
    <p>Axis tick label.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the label.</p>\n'
    )
    distance: Optional[float] = Field(
        15, description='\n\n<p>The distance between the label and tick line.</p>\n'
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<p>The content formatter of scale label, which supports both string template and callback function.\nExample:</p>\n<pre><code class="lang-ts">// use string template. the template variable {value} represent the default label text\nformatter: &#39;{value} kg&#39;\n\n// use function callback. the function parameters are scale values.\nformatter: function (value) {\n    return value + &#39;km/h&#39;;\n}\n</code></pre>\n',
    )
    color: Optional[Any] = Field('#464646', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich481] = Field(
        None,
        description='<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',
    )


class ItemStyle330(HandleStyle1):
    """
    <p>The style of pointer.</p>

    """

    pass


class Pointer(BaseModel):
    """
    <p>Gauge chart pointer.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the pointer.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n\n\n<p>Whether to show the pointer above detail and title.</p>\n',
    )
    icon: Optional[str] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0</code></p>\n</blockquote>\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>',
    )
    offsetCenter: Optional[Any] = Field(
        '[0, 0]',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0</code></p>\n</blockquote>\n\n\n<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n',
    )
    length: Optional[Union[str, float]] = Field(
        '60%',
        description='\n\n<p>The length of pointer which could be absolute value and also the percentage relative to <a href="#series-gauge.radius">radius</a>.</p>\n',
    )
    width: Optional[float] = Field(6, description='\n\n<p>The width of pointer.</p>\n')
    keepAspect: Optional[bool] = Field(
        False,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0</code></p>\n</blockquote>\n\n\n<p>Whether to keep aspect for icons in the form of <code class="codespan">path://</code>.</p>\n',
    )
    itemStyle: Optional[ItemStyle330] = Field(
        None, description='<p>The style of pointer.</p>\n'
    )


class ItemStyle331(BaseModel):
    """
    <p>The style of anchor.</p>

    """

    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#5470c6', description='\n\n<p>The border color of anchor.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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\n',
    )


class Anchor(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0</code></p>
    </blockquote>
    <p>The fixed point of a pointer in a dial.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the anchor.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether the anchor is showed above the pointer.</p>\n',
    )
    size: Optional[float] = Field(6, description='\n\n<p>The size of anchor.</p>\n')
    icon: Optional[str] = Field(
        'default',
        description='<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>',
    )
    offsetCenter: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n',
    )
    keepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for icons in the form of <code class="codespan">path://</code>.</p>\n',
    )
    itemStyle: Optional[ItemStyle331] = Field(
        None, description='<p>The style of anchor.</p>\n'
    )


class Decal24(BaseModel):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'rect',
        description='<p>The symbol type of the decal. If it is in the type of <code class="codespan">string[]</code>, it means the symbols are used one by one.</p>\n<p>Icon types provided by ECharts includes</p>\n<p><code class="codespan">&#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>',
    )
    symbolSize: Optional[float] = Field(
        1,
        description='<p>Range of values: <code class="codespan">0</code> to <code class="codespan">1</code>, representing the size of symbol relative to decal.</p>\n',
    )
    symbolKeepAspect: Optional[bool] = Field(
        True,
        description='<p>Whether or not to keep the aspect ratio of the pattern.</p>\n',
    )
    color: Optional[str] = Field(
        'rgba(0, 0, 0, 0.2)',
        description='<p>For the color of the decal pattern, it is recommended to use a translucent color, which can be superimposed on the color of the series itself.</p>\n',
    )
    backgroundColor: Optional[str] = Field(
        None,
        description='<p>The background color of the decal will be over the color of the series itself, under the decal pattern.</p>\n',
    )
    dashArrayX: Optional[Union[float, Any]] = Field(
        5,
        description='<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class="codespan">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class="codespan">dashArrayX</code> controls the horizontal pattern pattern. When its value is of type <code class="codespan">number</code> or <code class="codespan">number[]</code>, it is similar to <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is of type <code class="codespan">number</code>, it means that the pattern and the blank space are of this value respectively. For example, <code class="codespan">5</code> means the pattern with width 5 is displayed first, then 5 pixels empty, then the pattern with width 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class="codespan">number[]</code> type, it means that the pattern and empty space are loops of an array of values. For example: <code class="codespan">[5, 10, 2, 6]</code> means the pattern is 5 pixels wide, then 10 pixels empty, then the pattern is 2 pixels wide, then 6 pixels empty, then the pattern is 5 pixels wide...</p>\n</li>\n<li><p>If of type <code class="codespan">(number | number[])[]</code>, it means that each row is a loop with an array of values for the pattern and blank space. For example: <code class="codespan">[10, [2, 5]]</code> means that the first line will be 10 pixels by 10 pixels and empty space, the second line will be 2 pixels by 2 pixels and empty space, and the third line will be 10 pixels by 10 pixels and empty space...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1" width="700" height="300"></iframe>\n\n',
    )
    dashArrayY: Optional[Union[float, Any]] = Field(
        5,
        description='<p>The basic pattern of the decal pattern is an infinite loop in the form of <code class="codespan">Pattern - Blank - Pattern - Blank - Pattern - Blank</code> both horizontally and vertically, respectively. By setting the length of each pattern and blank, complex pattern effects can be achieved.</p>\n<p><code class="codespan">dashArrayY</code> controls the horizontal pattern pattern. Similar to <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray" target="_blank">SVG stroke-dasharray</a>.</p>\n<ul>\n<li><p>If it is a <code class="codespan">number</code> type, it means the pattern and the blank are each of this value. For example, <code class="codespan">5</code> means that the pattern with a height of 5 is displayed first, then 5 pixels empty, then the pattern with a height of 5 is displayed...</p>\n</li>\n<li><p>In the case of <code class="codespan">number[]</code> type, it means that the pattern and empty space are loops of sequential array values. For example: <code class="codespan">[5, 10, 2, 6]</code> means the pattern is 5 pixels high, then 10 pixels empty, then the pattern is 2 pixels high, then 6 pixels empty, then the pattern is 5 pixels high...</p>\n</li>\n</ul>\n<p>This interface can be better understood with the following examples.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/aria-decal&edit=1&reset=1" width="700" height="300"></iframe>\n\n',
    )
    rotation: Optional[float] = Field(
        0,
        description='<p>The overall rotation angle (in radians) of the pattern, in the range from `-Math.</p>\n',
    )
    maxTileWidth: Optional[float] = Field(
        512,
        description='<p>The upper limit of the width of the generated pattern before it is duplicated. Usually this value is not necessary, but you can try to increase it if you notice discontinuous seams in the pattern when it repeats.</p>\n',
    )
    maxTileHeight: Optional[float] = Field(
        512,
        description='<p>The upper limit of the height of the generated pattern before it repeats. This value is usually not necessary to set, but you can try to increase it if you find that the pattern has discontinuous seams when it is repeated.</p>\n\n',
    )


class ItemStyle332(BaseModel):
    """
    <p>The style of gauge chart.</p>

    """

    color: Optional[Any] = Field(
        'auto',
        description='<p>The color of pointer. Defaults to use <a href="#series-gauge.axisLine.lineStyle.color">the color of section</a> where the numerical value belongs to.</p>\n',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal24] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class ItemStyle333(ItemStyle15):
    pass


class Emphasis151(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle333] = Field(None, description='')


class _StyleName482(_StyleName):
    pass


class Rich482(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName482] = Field(
        None, alias='<style_name>', description=''
    )


class Title5(BaseModel):
    """
    <p>The title of gauge chart.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the title.</p>\n'
    )
    offsetCenter: Optional[Any] = Field(
        "[0, '20%']",
        description='\n\n<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n',
    )
    color: Optional[Any] = Field('#464646', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(16, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None, description='\n\n<p>Border color of the text fragment.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich482] = Field(
        None,
        description='<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',
    )
    valueAnimation: Optional[bool] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to enable text animation of value change.</p>\n',
    )


class _StyleName483(_StyleName):
    pass


class Rich483(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName483] = Field(
        None, alias='<style_name>', description=''
    )


class Detail1(BaseModel):
    """
    <p>The detail about gauge chart which is used to show data.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show the details.</p>\n'
    )
    color: Optional[Any] = Field(
        '#464646',
        description='\n\n<p>The text color. Defaults to use <a href="#series-gauge.axisLine.lineStyle.color">the color of section</a> where the numerical value belongs to.</p>\n',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'bold',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(30, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        30,
        description='\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',
    )
    backgroundColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>The background color of detail.</p>\n'
    )
    borderColor: Optional[Any] = Field(
        '#ccc', description='\n\n<p>The border color of detail.</p>\n'
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>The border width of detail.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(100, description='\n\n<p>The width of detail.</p>\n')
    height: Optional[float] = Field(
        40, description='\n\n<p>The height of detail.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich483] = Field(
        None,
        description='<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',
    )
    valueAnimation: Optional[bool] = Field(
        True,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to enable text animation of value change.</p>\n',
    )
    offsetCenter: Optional[Any] = Field(
        "[0, '40%']",
        description='\n\n<p>The offset position relative to the center of gauge chart. The first item of array is the horizontal offset; the second item of array is the vertical offset. It could be absolute value and also the percentage relative to the radius of gauge chart.</p>\n',
    )
    formatter: Optional[Union[Any, str]] = Field(
        None,
        description='<p>Formatter is used to format detail, which supports string template and callback function.</p>\n<pre><code class="lang-ts">formatter: function (value) {\n    return value.toFixed(0);\n}\n</code></pre>\n',
    )


class _StyleName484(_StyleName3):
    pass


class Rich484(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName484] = Field(
        None, alias='<style_name>', description=''
    )


class Label438(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich484] = Field(
        None,
        description='<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',
    )


class ItemStyle334(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName485(_StyleName3):
    pass


class Rich485(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName485] = Field(
        None, alias='<style_name>', description=''
    )


class Label439(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich485] = Field(
        None,
        description='<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',
    )


class ItemStyle335(HandleStyle1):
    pass


class Emphasis152(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label439] = Field(None, description='')
    itemStyle: Optional[ItemStyle335] = Field(None, description='')


class _StyleName486(_StyleName3):
    pass


class Rich486(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName486] = Field(
        None, alias='<style_name>', description=''
    )


class Label440(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich486] = Field(
        None,
        description='<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',
    )


class ItemStyle336(HandleStyle1):
    pass


class Blur124(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label440] = Field(None, description='')
    itemStyle: Optional[ItemStyle336] = Field(None, description='')


class ItemStyle337(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName487(_StyleName3):
    pass


class Rich487(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName487] = Field(
        None, alias='<style_name>', description=''
    )


class Label441(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich487] = Field(
        None,
        description='<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',
    )


class _StyleName488(_StyleName3):
    pass


class Rich488(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName488] = Field(
        None, alias='<style_name>', description=''
    )


class Label442(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich488] = Field(
        None,
        description='<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',
    )


class ItemStyle338(HandleStyle1):
    pass


class Emphasis153(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label442] = Field(None, description='')
    itemStyle: Optional[ItemStyle338] = Field(None, description='')


class Datum38(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle337] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label441] = Field(None, description='')
    emphasis: Optional[Emphasis153] = Field(None, description='')


class MarkPoint12(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-gauge.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-gauge.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-gauge.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label438] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle334] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis152] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur124] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum38]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-gauge.markPoint.data.x">x</a>, <a href="#series-gauge.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName489(_StyleName3):
    pass


class Rich489(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName489] = Field(
        None, alias='<style_name>', description=''
    )


class Label443(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich489] = Field(
        None,
        description='<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',
    )


class LineStyle287(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName490(_StyleName3):
    pass


class Rich490(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName490] = Field(
        None, alias='<style_name>', description=''
    )


class Label444(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich490] = Field(
        None,
        description='<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',
    )


class LineStyle288(LineStyle51):
    pass


class Emphasis154(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label444] = Field(None, description='')
    lineStyle: Optional[LineStyle288] = Field(None, description='')


class _StyleName491(_StyleName3):
    pass


class Rich491(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName491] = Field(
        None, alias='<style_name>', description=''
    )


class Label445(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich491] = Field(
        None,
        description='<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',
    )


class LineStyle289(LineStyle51):
    pass


class Blur125(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label445] = Field(None, description='')
    lineStyle: Optional[LineStyle289] = Field(None, description='')


class LineStyle290(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName492(_StyleName3):
    pass


class Rich492(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName492] = Field(
        None, alias='<style_name>', description=''
    )


class Label446(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich492] = Field(
        None,
        description='<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',
    )


class LineStyle291(LineStyle60):
    pass


class _StyleName493(_StyleName3):
    pass


class Rich493(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName493] = Field(
        None, alias='<style_name>', description=''
    )


class Label447(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich493] = Field(
        None,
        description='<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',
    )


class Emphasis155(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle291] = Field(None, description='')
    label: Optional[Label447] = Field(None, description='')


class LineStyle292(LineStyle60):
    pass


class _StyleName494(_StyleName3):
    pass


class Rich494(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName494] = Field(
        None, alias='<style_name>', description=''
    )


class Label448(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich494] = Field(
        None,
        description='<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',
    )


class Blur126(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle292] = Field(None, description='')
    label: Optional[Label448] = Field(None, description='')


class Field024(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle290] = Field(
        None,
        description='<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',
    )
    label: Optional[Label446] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis155] = Field(None, description='')
    blur: Optional[Blur126] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle293(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName495(_StyleName3):
    pass


class Rich495(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName495] = Field(
        None, alias='<style_name>', description=''
    )


class Label449(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich495] = Field(
        None,
        description='<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',
    )


class LineStyle294(LineStyle60):
    pass


class _StyleName496(_StyleName3):
    pass


class Rich496(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName496] = Field(
        None, alias='<style_name>', description=''
    )


class Label450(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich496] = Field(
        None,
        description='<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',
    )


class Emphasis156(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle294] = Field(None, description='')
    label: Optional[Label450] = Field(None, description='')


class LineStyle295(LineStyle60):
    pass


class _StyleName497(_StyleName3):
    pass


class Rich497(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName497] = Field(
        None, alias='<style_name>', description=''
    )


class Label451(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich497] = Field(
        None,
        description='<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',
    )


class Blur127(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle295] = Field(None, description='')
    label: Optional[Label451] = Field(None, description='')


class Field124(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle293] = Field(
        None,
        description='<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',
    )
    label: Optional[Label449] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis156] = Field(None, description='')
    blur: Optional[Blur127] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data26(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-gauge.markLine.data.0.x">x</a>, <a href="#series-gauge.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field024] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field124] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine12(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-gauge.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label443] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle287] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis154] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur125] = Field(
        None,
        description='<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',
    )
    data: Optional[Data26] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-gauge.markLine.data.0.x">x</a>, <a href="#series-gauge.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<pre><code>data: [\n\n[\n        {\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName498(_StyleName3):
    pass


class Rich498(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName498] = Field(
        None, alias='<style_name>', description=''
    )


class Label452(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich498] = Field(
        None,
        description='<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',
    )


class ItemStyle339(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName499(_StyleName3):
    pass


class Rich499(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName499] = Field(
        None, alias='<style_name>', description=''
    )


class Label453(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich499] = Field(
        None,
        description='<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',
    )


class ItemStyle340(HandleStyle1):
    pass


class Emphasis157(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label453] = Field(None, description='')
    itemStyle: Optional[ItemStyle340] = Field(None, description='')


class _StyleName500(_StyleName3):
    pass


class Rich500(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName500] = Field(
        None, alias='<style_name>', description=''
    )


class Label454(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich500] = Field(
        None,
        description='<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',
    )


class ItemStyle341(HandleStyle1):
    pass


class Blur128(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label454] = Field(None, description='')
    itemStyle: Optional[ItemStyle341] = Field(None, description='')


class ItemStyle342(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName501(_StyleName3):
    pass


class Rich501(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName501] = Field(
        None, alias='<style_name>', description=''
    )


class Label455(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich501] = Field(
        None,
        description='<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',
    )


class ItemStyle343(HandleStyle1):
    pass


class _StyleName502(_StyleName3):
    pass


class Rich502(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName502] = Field(
        None, alias='<style_name>', description=''
    )


class Label456(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich502] = Field(
        None,
        description='<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',
    )


class Emphasis158(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle343] = Field(None, description='')
    label: Optional[Label456] = Field(None, description='')


class ItemStyle344(HandleStyle1):
    pass


class _StyleName503(_StyleName3):
    pass


class Rich503(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName503] = Field(
        None, alias='<style_name>', description=''
    )


class Label457(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich503] = Field(
        None,
        description='<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',
    )


class Blur129(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle344] = Field(None, description='')
    label: Optional[Label457] = Field(None, description='')


class Field025(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle342] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label455] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis158] = Field(None, description='')
    blur: Optional[Blur129] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle345(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName504(_StyleName3):
    pass


class Rich504(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName504] = Field(
        None, alias='<style_name>', description=''
    )


class Label458(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich504] = Field(
        None,
        description='<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',
    )


class ItemStyle346(HandleStyle1):
    pass


class _StyleName505(_StyleName3):
    pass


class Rich505(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName505] = Field(
        None, alias='<style_name>', description=''
    )


class Label459(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich505] = Field(
        None,
        description='<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',
    )


class Emphasis159(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle346] = Field(None, description='')
    label: Optional[Label459] = Field(None, description='')


class ItemStyle347(HandleStyle1):
    pass


class _StyleName506(_StyleName3):
    pass


class Rich506(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName506] = Field(
        None, alias='<style_name>', description=''
    )


class Label460(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich506] = Field(
        None,
        description='<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',
    )


class Blur130(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle347] = Field(None, description='')
    label: Optional[Label460] = Field(None, description='')


class Field125(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle345] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label458] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis159] = Field(None, description='')
    blur: Optional[Blur130] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data27(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-gauge.markArea.data.0.x">x</a>, <a href="#series-gauge.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [

    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field025] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field125] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea12(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label452] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle339] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis157] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur128] = Field(
        None,
        description='<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',
    )
    data: Optional[Data27] = Field(
        None,
        description='<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-gauge.markArea.data.0.x">x</a>, <a href="#series-gauge.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code 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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class TextStyle48(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip34(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle48] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series19(BaseModel):
    """
        <p><strong>Gauge chart</strong></p>
    <p><strong>Example: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=gauge&reset=1&edit=1" width="600" height="500"></iframe>


    """

    type: Optional[str] = Field('gauge', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'data',
        description='\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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<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',
    )
    center: Optional[Any] = Field(
        "['50%', '50%']",
        description='\n\n<p>Center position of , the first of which is the horizontal position, and the second is the vertical position.</p>\n<p>Percentage is supported. When set in percentage, the item is relative to the container width, and the second item to the height.</p>\n<p><strong>Example: </strong></p>\n<pre><code>// Set to absolute pixel values\ncenter: [400, 300]\n// Set to relative percent\ncenter: [&#39;50%&#39;, &#39;50%&#39;]\n</code></pre>',
    )
    radius: Optional[Union[float, str]] = Field(
        '75%',
        description='\n\n<p>The radius of gauge chart. It can be a percentage value of the smaller of container half width and half height, also can be an absolute value.</p>\n',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    startAngle: Optional[float] = Field(
        225,
        description='\n\n<p>The start angle of gauge chart. The direct right side of <a href="#series-gauge.center">circle center</a> is <code class="codespan">0</code> degree, the right above it is <code class="codespan">90</code> degree, the direct left side of it is <code class="codespan">180</code> degree.</p>\n',
    )
    endAngle: Optional[float] = Field(
        -45, description='\n\n<p>The end angle of gauge chart.</p>\n'
    )
    clockwise: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether the scale in gauge chart increases clockwise.</p>\n',
    )
    data: Optional[List[Datum37]] = Field(
        None,
        description='<p>Data array of  series, which can be a single data value, like:</p>\n<pre><code class="lang-ts">[12, 34, 56, 10, 23]\n</code></pre>\n<p>Or, if need extra dimensions for components like <a href="#visualMap">visualMap</a> to map to graphic attributes like color, it can also be in the form of array. For example:</p>\n<pre><code class="lang-ts">[[12, 14], [34, 50], [56, 30], [10, 15], [23, 10]]\n</code></pre>\n<p>In this case, we can assgin the second value in each array item to <a href="#visualMap">visualMap</a> component.</p>\n<p>More likely, we need to assign name to each data item, in which case each item should be an object:</p>\n<pre><code class="lang-ts">[{\n    // name of date item\n    name: &#39;data1&#39;,\n    // value of date item is 8\n    value: 10\n}, {\n    name: &#39;data2&#39;,\n    value: 20\n}]\n</code></pre>\n<p>Each data item can be further customized:</p>\n<pre><code class="lang-ts">[{\n    name: &#39;data1&#39;,\n    value: 10\n}, {\n    // name of data item\n    name: &#39;data2&#39;,\n    value : 56,\n    // user-defined label format that only useful for this data item\n    label: {},\n    // user-defined special itemStyle that only useful for this data item\n    itemStyle:{}\n}]\n</code></pre>\n',
    )
    min: Optional[float] = Field(
        0,
        description='\n\n<p>The minimum data value which map to <a href="#series-gauge.minAngle">minAngle</a>.</p>\n',
    )
    max: Optional[float] = Field(
        100,
        description='\n\n<p>The maximum data value which map to  <a href="#series-gauge.maxAngle">maxAngle</a>.</p>\n',
    )
    splitNumber: Optional[float] = Field(
        10,
        description='\n\n<p>The number of split segments of gauge chart scale.</p>\n',
    )
    axisLine: Optional[AxisLine8] = Field(
        None,
        description='<p>The related configuration about the axis line of gauge chart.</p>\n',
    )
    progress: Optional[Progress1] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0</code></p>\n</blockquote>\n<p>Used to show current progress.</p>\n',
    )
    splitLine: Optional[SplitLine7] = Field(
        None, description='<p>The style of split line.</p>\n'
    )
    axisTick: Optional[AxisTick8] = Field(
        None, description='<p>The tick line style.</p>\n'
    )
    axisLabel: Optional[AxisLabel8] = Field(
        None, description='<p>Axis tick label.</p>\n'
    )
    pointer: Optional[Pointer] = Field(
        None, description='<p>Gauge chart pointer.</p>\n'
    )
    anchor: Optional[Anchor] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0</code></p>\n</blockquote>\n<p>The fixed point of a pointer in a dial.</p>\n',
    )
    itemStyle: Optional[ItemStyle332] = Field(
        None, description='<p>The style of gauge chart.</p>\n'
    )
    emphasis: Optional[Emphasis151] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    title: Optional[Title5] = Field(
        None, description='<p>The title of gauge chart.</p>\n'
    )
    detail: Optional[Detail1] = Field(
        None,
        description='<p>The detail about gauge chart which is used to show data.</p>\n',
    )
    markPoint: Optional[MarkPoint12] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine12] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea12] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    tooltip: Optional[Tooltip34] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName507(_StyleName3):
    pass


class Rich507(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName507] = Field(
        None, alias='<style_name>', description=''
    )


class Label461(BaseModel):
    """
    <p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich507] = Field(
        None,
        description='<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',
    )


class LineStyle296(LineStyle51):
    pass


class LabelLine71(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle296] = Field(None, description='')


class LabelLayout15(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class Decal25(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle348(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal25] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class _StyleName508(_StyleName3):
    pass


class Rich508(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName508] = Field(
        None, alias='<style_name>', description=''
    )


class Label462(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich508] = Field(
        None,
        description='<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',
    )


class LineStyle297(LineStyle51):
    pass


class LabelLine72(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle297] = Field(None, description='')


class ItemStyle349(ItemStyle15):
    pass


class Emphasis160(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label462] = Field(None, description='')
    labelLine: Optional[LabelLine72] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle349] = Field(None, description='')


class _StyleName509(_StyleName3):
    pass


class Rich509(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName509] = Field(
        None, alias='<style_name>', description=''
    )


class Label463(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich509] = Field(
        None,
        description='<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',
    )


class LineStyle298(LineStyle51):
    pass


class LabelLine73(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle298] = Field(None, description='')


class ItemStyle350(HandleStyle1):
    pass


class Blur131(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Available when <a href="#series-pictorialBar.emphasis.focus">emphasis.focus</a> is set.</p>

    """

    label: Optional[Label463] = Field(None, description='')
    labelLine: Optional[LabelLine73] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle350] = Field(None, description='')


class Select42(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state. Available when <a href="#series-pictorialBar.selectedMode">selectedMode</a> is set.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )


class _StyleName510(_StyleName3):
    pass


class Rich510(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName510] = Field(
        None, alias='<style_name>', description=''
    )


class Label464(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich510] = Field(
        None,
        description='<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',
    )


class LineStyle299(LineStyle51):
    pass


class LabelLine74(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle299] = Field(None, description='')


class ItemStyle351(HandleStyle1):
    pass


class SelectedMode(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>


    <p>Selected mode. It is enabled by default, and you may set it to be <code class="codespan">false</code> to disable it.</p>
    <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>
    <blockquote>
    <p><code class="codespan">&#39;series&#39;</code> is supported since v5.3.0</p>
    </blockquote>

    """

    label: Optional[Label464] = Field(None, description='')
    labelLine: Optional[LabelLine74] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle351] = Field(None, description='')


class HoverAnimation(BaseModel):
    """


    <p>Whether to enable hover animation.</p>
    <p>This attribute can be set at the <a href="#series-pictorialBar.hoverAnimation">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.hoverAnimation">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>
    <p>For example:</p>
    <pre><code class="lang-ts">series: [{
        hoverAnimation: ... // Affect all data items.
        data: [23, 56]
    }]
    // Or
    series: [{
        data: [{
            value: 23
            hoverAnimation: ... // Only affect this data item.
        }, {
            value: 56
            hoverAnimation: ... // Only affect this data item.
        }]
    }]
    </code></pre>

    """

    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1" width="800" height="400"></iframe>\n\n',
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n\n\n\n\n\n\n\n',
    )


class _StyleName511(_StyleName3):
    pass


class Rich511(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName511] = Field(
        None, alias='<style_name>', description=''
    )


class Label465(BaseModel):
    """
    <p>The style setting of the text label in a single bar.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich511] = Field(
        None,
        description='<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',
    )


class LineStyle300(LineStyle51):
    pass


class LabelLine75(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle300] = Field(None, description='')


class Decal26(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle352(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal26] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class _StyleName512(_StyleName3):
    pass


class Rich512(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName512] = Field(
        None, alias='<style_name>', description=''
    )


class Label466(BaseModel):
    """
    <p>Label style configurations of single data.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich512] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle301(LineStyle51):
    pass


class LabelLine76(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle301] = Field(None, description='')


class ItemStyle353(ItemStyle37):
    """
    <p>Rectangle style configurations of single data.</p>

    """

    pass


class Emphasis161(BaseModel):
    """
    <p>Emphasis state of the specified single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label466] = Field(
        None, description='<p>Label style configurations of single data.</p>\n'
    )
    labelLine: Optional[LabelLine76] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle353] = Field(
        None, description='<p>Rectangle style configurations of single data.</p>\n'
    )


class _StyleName513(_StyleName3):
    pass


class Rich513(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName513] = Field(
        None, alias='<style_name>', description=''
    )


class Label467(BaseModel):
    """
    <p>Label style configurations of single data.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich513] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle302(LineStyle51):
    pass


class LabelLine77(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle302] = Field(None, description='')


class ItemStyle354(ItemStyle38):
    """
    <p>Rectangle style configurations of single data.</p>

    """

    pass


class Blur132(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state of the specified single data.</p>

    """

    label: Optional[Label467] = Field(
        None, description='<p>Label style configurations of single data.</p>\n'
    )
    labelLine: Optional[LabelLine77] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle354] = Field(
        None, description='<p>Rectangle style configurations of single data.</p>\n'
    )


class _StyleName514(_StyleName3):
    pass


class Rich514(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName514] = Field(
        None, alias='<style_name>', description=''
    )


class Label468(BaseModel):
    """
    <p>Label style configurations of single data.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    distance: Optional[float] = Field(
        5, description='\n\n<p>Distance to the host graphic element.</p>\n'
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich514] = Field(
        None,
        description='<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',
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n<ul>\n<li>Additional positions are supported for bar series under polar coordinates: <code class="codespan">start</code> / <code class="codespan">insideStart</code> / <code class="codespan">middle</code> / <code class="codespan">insideEnd</code> / <code class="codespan">end</code>.</li>\n</ul>\n<blockquote>\n<p>Since <code class="codespan">v5.2.0</code></p>\n</blockquote>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-radial-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-polar-label-tangential-multiple&reset=1&edit=1" width="800" height="500"></iframe>\n\n\n\n',
    )


class LineStyle303(LineStyle51):
    pass


class LabelLine78(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle303] = Field(None, description='')


class ItemStyle355(ItemStyle38):
    """
    <p>Rectangle style configurations of single data.</p>

    """

    pass


class Select43(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state of the specified single data.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label468] = Field(
        None, description='<p>Label style configurations of single data.</p>\n'
    )
    labelLine: Optional[LabelLine78] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle355] = Field(
        None, description='<p>Rectangle style configurations of single data.</p>\n'
    )


class TextStyle49(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip35(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle49] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum39(BaseModel):
    name: Optional[str] = Field(None, description='<p>The name of data item.</p>\n')
    value: Optional[float] = Field(
        None, description='<p>The value of a single data item.</p>\n'
    )
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    symbol: Optional[str] = Field(
        'circle',
        description='<p>Specify the type of graphic elements.</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>Example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbol">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbol">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbol: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbol: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbol: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        "['100%', '100%']",
        description='\n\n<p>Symbol size.</p>\n<p>It can be set as a array, which means [width, height]. For example, <code class="codespan">[20, 10]</code> means width <code class="codespan">20</code> and height <code class="codespan">10</code>. It can also be set as a single number, like <code class="codespan">10</code>, which is equivalent to <code class="codespan">[10, 10]</code>.</p>\n<p>Absolute value can be used (like <code class="codespan">10</code>), or percent value can be used (like <code class="codespan">&#39;120%&#39;</code>, <code class="codespan">[&#39;55%&#39;, 23]</code>).</p>\n<p>When percent value is used, final size of the graphic element is calculated based on its <a href="#series-pictorialBar">reference bar</a>.</p>\n<p>For example, there is a reference bar based on x axis (that is, it is a vertical bar), and <a href="#series-pictorialBar.symbolSize">symbolSize</a> is set as <code class="codespan">[&#39;30%&#39;, &#39;50%&#39;]</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code class="codespan">&lt;width of reference bar&gt; * 30%</code>.</li>\n<li>height:<ul>\n<li>If <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used: <code class="codespan">&lt;height of reference bar&gt; * 50%</code>.</li>\n<li>If <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is not used: <code class="codespan">&lt;height of reference bar&gt; * 50%</code>.</li>\n</ul>\n</li>\n</ul>\n<p>Analogously, the case that based on y axis can be obtained by exchanging them.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolSize">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolSize">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolPosition: Optional[str] = Field(
        'start',
        description='\n\n<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;start&#39;</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code class="codespan">&#39;end&#39;</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code class="codespan">&#39;center&#39;</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolPosition">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolPosition">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolPosition: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPosition: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPosition: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Specify the offset of graphic element according to its original position. Adopting <code class="codespan">symbolOffset</code> is the final step in layout, which enables adjustment of graphic element position.</p>\n<p>A absolute value can be set (like <code class="codespan">10</code>), or a percent value can be set (like <code class="codespan">&#39;120%&#39;</code>、<code class="codespan">[&#39;55%&#39;, 23]</code>), which is based on its <a href="#series-pictorialBar.symbolSize">symbolSize</a>.</p>\n<p>For example, <code class="codespan">[0, &#39;-50%&#39;]</code> means the graphic element will be adjusted upward half of the size of itself.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolOffset">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolOffset">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolOffset: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolOffset: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolOffset: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>The degree of the rotation of a graphic element.</p>\n<p>Notice, <code class="codespan">symbolRotate</code> will not affect the position of the graphic element, but just rotating by its center.</p>\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolRotate">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolRotate">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolRotate: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRotate: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRotate: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolRepeat: Optional[Union[bool, float, str]] = Field(
        None,
        description='\n\n<p>Whether to repeat a graphic element. Optional values:</p>\n<ul>\n<li><code class="codespan">false</code>/<code class="codespan">null</code>/<code class="codespan">undefined</code>: Do not repeat, that is, each graphic element represents a data item.</li>\n<li><code class="codespan">true</code>: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to <a href="#series-pictorialBar.data">data</a>.</li>\n<li>a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.</li>\n<li><code class="codespan">&#39;fixed&#39;</code>: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to <a href="#series-pictorialBar.symbolBoundingData">symbolBoundingData</a>, that is, the repeat times has nothing to do with <a href="#series-pictorialBar.data">data</a>. The setting is useful when graphic elements are used as background.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolRepeat">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolRepeat">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolRepeat: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeat: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeat: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolRepeatDirection: Optional[str] = Field(
        'start',
        description='\n\n<p>When <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used, <code class="codespan">symbolRepeatDirection</code> specifies the render order of the repeated graphic elements. The setting is useful in these cases below:</p>\n<ul>\n<li><p>If <a href="#series-pictorialBar.symbolMargin">symbolMargin</a> is set as a negative value, repeated elements will overlap with each other. <code class="codespan">symbolRepeatDirection</code> can be used to specify the order of overlap.</p>\n</li>\n<li><p>If <a href="#series-pictorialBar.animationDelay">animationDelay</a> or <a href="#series-pictorialBar.animationDelayUpdate">animationDelayUpdate</a> is used, <code class="codespan">symbolRepeatDirection</code> specifies the order of index.</p>\n</li>\n</ul>\n<p>Optional values can be <code class="codespan">&#39;start&#39;</code> and <code class="codespan">&#39;end&#39;</code>.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolRepeatDirection">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolRepeatDirection">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolRepeatDirection: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeatDirection: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeatDirection: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolMargin: Optional[Union[float, str]] = Field(
        None,
        description='\n\n<p>Specify margin of both sides of a graphic element. (&quot;both sides&quot; means the two sides in the direction of its value axis). It works only when <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used.</p>\n<p>Absolute value can be used (like <code class="codespan">20</code>), or percent value can be used (like <code class="codespan">&#39;-30%&#39;</code>), which is based on its <a href="#series-pictorialBar.symbolSize">symbolSize</a>.</p>\n<p><code class="codespan">symbolMargin</code> can be positive value or negative value, which enables overlap of graphic elements when <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used.</p>\n<p>A <code class="codespan">&quot;!&quot;</code> can be appended on the end of the value, like <code class="codespan">&quot;30%!&quot;</code> or <code class="codespan">25!</code>, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.</p>\n<p>Notice:</p>\n<ul>\n<li>When <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is <code class="codespan">true</code>/<code class="codespan">&#39;fixed&#39;</code>:\n  The given <code class="codespan">symbolMargin</code> is just a reference value. The final gap of graphic elements will be calculated according to <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a>, <code class="codespan">symbolMargin</code> and <a href="#series-pictorialBar.symbolBoundingData">symbolBoundingData</a>.</li>\n<li>When <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is set as a number:\n  <code class="codespan">symbolMargin</code> does not work any more.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolMargin">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolMargin">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolMargin: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolMargin: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolMargin: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolClip: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to clip graphic elements.</p>\n<ul>\n<li><code class="codespan">false</code>/null/undefined: The whole graphic elements represent the size of value.</li>\n<li><code class="codespan">true</code>: The clipped graphic elements reperent the size of value.</li>\n</ul>\n<p><code class="codespan">symbolClip</code> is usually used in this case: both &quot;amount value&quot; and &quot;current value&quot; should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n<p>Notice, in the example above,</p>\n<ul>\n<li>The same <a href="#series.pictorialBar.symbolBoundingData">symbolBoundingData</a> is used in &quot;background series&quot; and &quot;current value seires&quot;, which makes their graphic elements are the same size.</li>\n<li>A bigger <a href="#series.pictorialBar.z">z</a> is set on &quot;current value series&quot;, which makes it is over &quot;background series&quot;.</li>\n</ul>\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolClip">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolClip">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolClip: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolClip: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolClip: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolBoundingData: Optional[float] = Field(
        None,
        description='<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code class="codespan">symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code class="codespan">symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code class="codespan">symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code class="codespan">symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is not used:</p>\n<p>  <code class="codespan">symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code class="codespan">symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code class="codespan">24</code>, <code class="codespan">symbolSize</code> is set as <code class="codespan">[30, &#39;50%&#39;]</code>, <code class="codespan">symbolBoundingData</code> is set as <code class="codespan">124</code>, the final size of the graphic element will be <code class="codespan">124 * 50% = 62</code>. If <code class="codespan">symbolBoundingData</code> is not set, the final size will be <code class="codespan">24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used:</p>\n<p>  <code class="codespan">symbolBoundingData</code> is the extreme value of the coordinate system. <code class="codespan">symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href="#series-pictorialBar.symbolMargin">symbolMargin</a> and <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> and <a href="#series-pictorialBar.symbolSize">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code class="codespan">symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href="#series-pictorialBar.symbolClip">symbolCilp</a> is used:</p>\n<p>  And a series is used to display &quot;amont value&quot;, while another series is used to display &quot;current value&quot;. <code class="codespan">symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n<ul>\n<li><p>When <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used:</p>\n<p>  <code class="codespan">symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code class="codespan">symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n<p><br>\n<code class="codespan">symbolBoundingData</code> can also be an array, such as <code class="codespan">[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolBoundingData">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolBoundingData">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolBoundingData: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolBoundingData: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolBoundingData: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolPatternSize: Optional[float] = Field(
        400,
        description='\n\n<p>Image can be used as the pattern of graphic elements.</p>\n<pre><code class="lang-ts">var textureImg = new Image();\ntextureImg.src = &#39;data:image/jpeg;base64,...&#39;; // dataURI\n// Or\n// textureImg.src = &#39;http://example.website/xx.png&#39;; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: &#39;repeat&#39;\n    }\n}\n</code></pre>\n<p><code class="codespan">symbolPatternSize</code> specifies the size of pattern image. For example, if <code class="codespan">symbolPatternSize</code> is <code class="codespan">400</code>, the pattern image will be displayed at the size of <code class="codespan">400px * 400px</code>.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-patternSize&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolPatternSize">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolPatternSize">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolPatternSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPatternSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPatternSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    z: Optional[float] = Field(
        None,
        description='<p>Specify the relationship of overlap between graphic elements. A bigger value means higher.</p>\n',
    )
    hoverAnimation: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to enable hover animation.</p>\n<p>This attribute can be set at the <a href="#series-pictorialBar.hoverAnimation">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.hoverAnimation">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    hoverAnimation: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        hoverAnimation: ... // Only affect this data item.\n    }, {\n        value: 56\n        hoverAnimation: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1" width="800" height="400"></iframe>\n\n',
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n\n\n\n\n\n',
    )
    label: Optional[Label465] = Field(
        None,
        description='<p>The style setting of the text label in a single bar.</p>\n',
    )
    labelLine: Optional[LabelLine75] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle352] = Field(None, description='')
    emphasis: Optional[Emphasis161] = Field(
        None, description='<p>Emphasis state of the specified single data.</p>\n'
    )
    blur: Optional[Blur132] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state of the specified single data.</p>\n',
    )
    select: Optional[Select43] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state of the specified single data.</p>\n',
    )
    tooltip: Optional[Tooltip35] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class _StyleName515(_StyleName3):
    pass


class Rich515(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName515] = Field(
        None, alias='<style_name>', description=''
    )


class Label469(BaseModel):
    """
    <p>Label of mark point.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'inside',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich515] = Field(
        None,
        description='<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',
    )


class ItemStyle356(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName516(_StyleName3):
    pass


class Rich516(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName516] = Field(
        None, alias='<style_name>', description=''
    )


class Label470(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich516] = Field(
        None,
        description='<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',
    )


class ItemStyle357(HandleStyle1):
    pass


class Emphasis162(BaseModel):
    """
    <p>Emphasis status of mark point.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label470] = Field(None, description='')
    itemStyle: Optional[ItemStyle357] = Field(None, description='')


class _StyleName517(_StyleName3):
    pass


class Rich517(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName517] = Field(
        None, alias='<style_name>', description=''
    )


class Label471(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich517] = Field(
        None,
        description='<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',
    )


class ItemStyle358(HandleStyle1):
    pass


class Blur133(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label471] = Field(None, description='')
    itemStyle: Optional[ItemStyle358] = Field(None, description='')


class ItemStyle359(HandleStyle1):
    """
    <p>Mark point style.</p>

    """

    pass


class _StyleName518(_StyleName3):
    pass


class Rich518(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName518] = Field(
        None, alias='<style_name>', description=''
    )


class Label472(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich518] = Field(
        None,
        description='<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',
    )


class _StyleName519(_StyleName3):
    pass


class Rich519(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName519] = Field(
        None, alias='<style_name>', description=''
    )


class Label473(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich519] = Field(
        None,
        description='<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',
    )


class ItemStyle360(HandleStyle1):
    pass


class Emphasis163(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label473] = Field(None, description='')
    itemStyle: Optional[ItemStyle360] = Field(None, description='')


class Datum40(BaseModel):
    name: Optional[str] = Field('', description='<p>Mark point name.</p>\n')
    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Available when using <a href="#series-pictorialBar.markPoint.data.type">type</a> it is used to assign maximum value and minimum value in dimensions, it could be <code class="codespan">0</code> (xAxis, radiusAxis), <code class="codespan">1</code> (yAxis, angleAxis), and use the first value axis dimension by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-pictorialBar.markPoint.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    itemStyle: Optional[ItemStyle359] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    label: Optional[Label472] = Field(None, description='')
    emphasis: Optional[Emphasis163] = Field(None, description='')


class MarkPoint13(BaseModel):
    """
    <p>Mark point in a chart.</p>

    """

    symbol: Optional[Union[str, Any]] = Field(
        'pin',
        description='\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-pictorialBar.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolSize: Optional[Union[float, Any, Any]] = Field(
        50,
        description='\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-pictorialBar.data">data</a>, and the second parameter <code class="codespan">params</code> is the rest parameters of data item.</p>\n',
    )
    symbolRotate: Optional[Union[float, Any]] = Field(
        None,
        description='\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-pictorialBar.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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label469] = Field(None, description='<p>Label of mark point.</p>\n')
    itemStyle: Optional[ItemStyle356] = Field(
        None, description='<p>Mark point style.</p>\n'
    )
    emphasis: Optional[Emphasis162] = Field(
        None, description='<p>Emphasis status of mark point.</p>\n'
    )
    blur: Optional[Blur133] = Field(
        None,
        description='<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',
    )
    data: Optional[List[Datum40]] = Field(
        None,
        description='<p>Data array for mark points, each of which is an object. Here are some ways to assign mark point position.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-pictorialBar.markPoint.data.x">x</a>, <a href="#series-pictorialBar.markPoint.data.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-pictorialBar.markPoint.data.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-pictorialBar.markPoint.data.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-pictorialBar.markPoint.data.valueIndex">valueIndex</a> or <a href="#series-pictorialBar.markPoint.data.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p><strong>For example: </strong></p>\n<pre><code class="lang-ts">data: [\n    {\n        name: &#39;maximum&#39;,\n        type: &#39;max&#39;\n    }, \n    {\n        name: &#39;coordinate&#39;,\n        coord: [10, 20]\n    }, {\n        name: &#39;fixed x position&#39;,\n        yAxis: 10,\n        x: &#39;90%&#39;\n    }, \n\n    {\n        name: &#39;screen coordinate&#39;,\n        x: 100,\n        y: 100\n    }\n]\n</code></pre>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName520(_StyleName3):
    pass


class Rich520(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName520] = Field(
        None, alias='<style_name>', description=''
    )


class Label474(BaseModel):
    """
    <p>Mark line text.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich520] = Field(
        None,
        description='<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',
    )


class LineStyle304(LineStyle60):
    """
    <p>Mark line style.</p>

    """

    pass


class _StyleName521(_StyleName3):
    pass


class Rich521(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName521] = Field(
        None, alias='<style_name>', description=''
    )


class Label475(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich521] = Field(
        None,
        description='<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',
    )


class LineStyle305(LineStyle51):
    pass


class Emphasis164(BaseModel):
    """
    <p>Emphasis status of mark line.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label475] = Field(None, description='')
    lineStyle: Optional[LineStyle305] = Field(None, description='')


class _StyleName522(_StyleName3):
    pass


class Rich522(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName522] = Field(
        None, alias='<style_name>', description=''
    )


class Label476(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich522] = Field(
        None,
        description='<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',
    )


class LineStyle306(LineStyle51):
    pass


class Blur134(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label476] = Field(None, description='')
    lineStyle: Optional[LineStyle306] = Field(None, description='')


class LineStyle307(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName523(_StyleName3):
    pass


class Rich523(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName523] = Field(
        None, alias='<style_name>', description=''
    )


class Label477(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich523] = Field(
        None,
        description='<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',
    )


class LineStyle308(LineStyle60):
    pass


class _StyleName524(_StyleName3):
    pass


class Rich524(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName524] = Field(
        None, alias='<style_name>', description=''
    )


class Label478(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich524] = Field(
        None,
        description='<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',
    )


class Emphasis165(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle308] = Field(None, description='')
    label: Optional[Label478] = Field(None, description='')


class LineStyle309(LineStyle60):
    pass


class _StyleName525(_StyleName3):
    pass


class Rich525(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName525] = Field(
        None, alias='<style_name>', description=''
    )


class Label479(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich525] = Field(
        None,
        description='<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',
    )


class Blur135(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle309] = Field(None, description='')
    label: Optional[Label479] = Field(None, description='')


class Field026(BaseModel):
    """
    <p>Data of the starting point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-pictorialBar.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-pictorialBar.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'starting point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle307] = Field(
        None,
        description='<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',
    )
    label: Optional[Label477] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis165] = Field(None, description='')
    blur: Optional[Blur135] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class LineStyle310(LineStyle60):
    """
    <p>Line style of this data item, which will be merged with <code class="codespan">lineStyle</code> of starting point and ending point.</p>

    """

    pass


class _StyleName526(_StyleName3):
    pass


class Rich526(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName526] = Field(
        None, alias='<style_name>', description=''
    )


class Label480(BaseModel):
    """
    <p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>

    """

    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich526] = Field(
        None,
        description='<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',
    )


class LineStyle311(LineStyle60):
    pass


class _StyleName527(_StyleName3):
    pass


class Rich527(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName527] = Field(
        None, alias='<style_name>', description=''
    )


class Label481(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich527] = Field(
        None,
        description='<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',
    )


class Emphasis166(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    lineStyle: Optional[LineStyle311] = Field(None, description='')
    label: Optional[Label481] = Field(None, description='')


class LineStyle312(LineStyle60):
    pass


class _StyleName528(_StyleName3):
    pass


class Rich528(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName528] = Field(
        None, alias='<style_name>', description=''
    )


class Label482(BaseModel):
    show: Optional[bool] = Field(
        True, description='<p>Whether show label or not.</p>\n'
    )
    position: Optional[str] = Field(
        'end',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=line-markline&reset=1&edit=1" width="800" height="500"></iframe>\n\n',
    )
    distance: Optional[Union[float, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich528] = Field(
        None,
        description='<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',
    )


class Blur136(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    lineStyle: Optional[LineStyle312] = Field(None, description='')
    label: Optional[Label482] = Field(None, description='')


class Field126(BaseModel):
    """
    <p>Data of the ending point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Special label types, are used to label maximum value, minimum value and so on.</p>\n<p><strong>Options are:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> minimum value.</li>\n<li><code class="codespan">&#39;max&#39;</code> maximum value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n<li><code class="codespan">&#39;median&#39;</code> median value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Works only when <a href="#series-pictorialBar.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be <code class="codespan">0</code> (for xAxis, or radiusAxis), or <code class="codespan">1</code> (for yAxis, or angleAxis). Dimension of the first numeric axis is used by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Works only when <a href="#series-pictorialBar.markLine.data.type">type</a> is assigned. It is used to state the dimension used to calculate maximum value or minimum value. It may be the direct name of a dimension, like <code class="codespan">x</code>, or <code class="codespan">angle</code> for line charts, or <code class="codespan">open</code>, or <code class="codespan">close</code> for candlestick charts.</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Coordinates of the starting point or ending point, whose format depends on the coordinate of the series. It can be <code class="codespan">x</code>, and <code class="codespan">y</code> for <a href="#grid">rectangular coordinates</a>, or <code class="codespan">radius</code>, and <code class="codespan">angle</code> for <a href="#polar">polar coordinates</a>.</p>\n<p><strong>Notice:</strong> For axis with <a href="#xAixs.type">axis.type</a> <code class="codespan">&#39;category&#39;</code>:</p>\n<ul>\n<li>If coord value is <code class="codespan">number</code>, it represents index of <a href="#xAxis.data">axis.data</a>.</li>\n<li>If coord value is <code class="codespan">string</code>, it represents concrete value in <a href="#xAxis.data">axis.data</a>. Please notice that in this case <code class="codespan">xAxis.data</code> must not be written as [number, number, ...], but can only be written [string, string, ...]. Otherwise it is not able to be located by markPoint / markLine.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    xAxis: {\n        type: &#39;category&#39;,\n        data: [&#39;5&#39;, &#39;6&#39;, &#39;9&#39;, &#39;13&#39;, &#39;19&#39;, &#39;33&#39;]\n        // As mentioned above, data should not be [5, 6, 9, 13, 19, 33] here.\n    },\n    series: {\n        type: &#39;line&#39;,\n        data: [11, 22, 33, 44, 55, 66],\n        markPoint: { // markLine is in the same way.\n            data: [{\n                coord: [5, 33.4], // The number 5 represents xAxis.data[5], that is, &#39;33&#39;.\n                // coord: [&#39;5&#39;, 33.4] // The string &#39;5&#39; represents the &#39;5&#39; in xAxis.data.\n            }]\n        }\n    }\n}\n</code></pre>\n',
    )
    name: Optional[str] = Field(
        'ending point',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None, description='\n\n<p>X position according to container, in pixel.</p>\n'
    )
    y: Optional[float] = Field(
        None, description='\n\n<p>Y position according to container, in pixel.</p>\n'
    )
    xAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    yAxis: Optional[Union[float, str]] = Field(
        None,
        description='<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>',
    )
    value: Optional[float] = Field(
        None, description='<p>Label value, which can be ignored.</p>\n'
    )
    symbol: Optional[str] = Field(
        None,
        description='\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>',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='\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',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\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',
    )
    symbolKeepAspect: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to keep aspect for symbols in the form of <code class="codespan">path://</code>.</p>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\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',
    )
    lineStyle: Optional[LineStyle310] = Field(
        None,
        description='<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',
    )
    label: Optional[Label480] = Field(
        None,
        description='<p>Label of this data item, which will be merged with <code class="codespan">label</code> of starting point and ending point.</p>\n',
    )
    emphasis: Optional[Emphasis166] = Field(None, description='')
    blur: Optional[Blur136] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data28(BaseModel):
    """
        <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>
    <ol>
    <li>Assign coordinate according to container with <a href="#series-pictorialBar.markLine.data.0.x">x</a>, <a href="#series-pictorialBar.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>
    </ol>
    <ol start="2">
    <li><p>Assign coordinate position with <a href="#series-pictorialBar.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>
    </li>
    <li><p>Use <a href="#series-pictorialBar.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-pictorialBar.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-pictorialBar.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>
    </li>
    <li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>
    </li>
    </ol>
    <p>When multiple attributes exist, priority is as the above order.</p>
    <p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>
    <pre><code>data: [

    {
            name: &#39;average line&#39;,
            // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported
            type: &#39;average&#39;
        },
        {
            name: &#39;Horizontal line with Y value at 100&#39;,
            yAxis: 100
        },
        [
            {
                // Use the same name with starting and ending point
                name: &#39;Minimum to Maximum&#39;,
                type: &#39;min&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],
    [
            {
                name: &#39;Markline between two points&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [{
            // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.
            yAxis: &#39;max&#39;,
            x: &#39;90%&#39;
        }, {
            type: &#39;max&#39;
        }],
    [
            {
                name: &#39;Mark line between two points&#39;,
                x: 100,
                y: 100
            },
            {
                x: 500,
                y: 200
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field026] = Field(
        None, alias='0', description='<p>Data of the starting point.</p>\n'
    )
    field_1: Optional[Field126] = Field(
        None, alias='1', description='<p>Data of the ending point.</p>\n'
    )


class MarkLine13(BaseModel):
    """
    <p>Use a line in the chart to illustrate.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    symbol: Optional[Union[str, Any]] = Field(
        None,
        description='<p>Symbol type at the two ends of the mark line. It can be an array for two ends, or assigned seperately. See <a href="#series-pictorialBar.markLine.data.0.symbol">data.symbol</a> for more format information.</p>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        None,
        description='<p>Symbol size at the two ends of the mark line. It can be an array for two ends, or assigned seperately.</p>\n<p><strong>Attention: </strong> You cannot assgin width and height seperately as normal <code class="codespan">symbolSize</code>.</p>\n',
    )
    precision: Optional[float] = Field(
        2,
        description='<p>Precision of marking line value, which is useful when displaying average value mark line.</p>\n',
    )
    label: Optional[Label474] = Field(None, description='<p>Mark line text.</p>\n')
    lineStyle: Optional[LineStyle304] = Field(
        None, description='<p>Mark line style.</p>\n'
    )
    emphasis: Optional[Emphasis164] = Field(
        None, description='<p>Emphasis status of mark line.</p>\n'
    )
    blur: Optional[Blur134] = Field(
        None,
        description='<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',
    )
    data: Optional[Data28] = Field(
        None,
        description='<p>Data array of marking line. Every array item can be an array of one or two values, representing starting and ending point of the line, and every item is an object. Here are several ways to assign the positions of starting and ending point.</p>\n<ol>\n<li>Assign coordinate according to container with <a href="#series-pictorialBar.markLine.data.0.x">x</a>, <a href="#series-pictorialBar.markLine.data.0.y">y</a> attribute, in which pixel values and percentage are supported.</li>\n</ol>\n<ol start="2">\n<li><p>Assign coordinate position with <a href="#series-pictorialBar.markLine.data.0.coord">coord</a> attribute, in which <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> are supported for each dimension.</p>\n</li>\n<li><p>Use <a href="#series-pictorialBar.markLine.data.0.type">type</a> attribute to mark the maximum and minimum values in the series, in which <a href="#series-pictorialBar.markLine.data.0.valueIndex">valueIndex</a> or <a href="#series-pictorialBar.markLine.data.0.valueDim">valueDim</a> can be used to assign the dimension.</p>\n</li>\n<li><p>You may also create a mark line in Cartesian coordinate at a specific position in X or Y axis by assigning <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code>. See <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a> for example.</p>\n</li>\n</ol>\n<p>When multiple attributes exist, priority is as the above order.</p>\n<p>You may also set the type of mark line through <code class="codespan">type</code>, stating whether it is for the maximum value or average value. Likewise, dimensions can be assigned through <code class="codespan">valueIndex</code>.</p>\n<pre><code>data: [\n\n{\n        name: &#39;average line&#39;,\n        // &#39;average&#39;, &#39;min&#39;, and &#39;max&#39; are supported\n        type: &#39;average&#39;\n    },\n    {\n        name: &#39;Horizontal line with Y value at 100&#39;,\n        yAxis: 100\n    },\n    [\n        {\n            // Use the same name with starting and ending point\n            name: &#39;Minimum to Maximum&#39;,\n            type: &#39;min&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n[\n        {\n            name: &#39;Markline between two points&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [{\n        // Mark line with a fixed X position in starting point. This is used to generate an arrow pointing to maximum line.\n        yAxis: &#39;max&#39;,\n        x: &#39;90%&#39;\n    }, {\n        type: &#39;max&#39;\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class _StyleName529(_StyleName3):
    pass


class Rich529(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName529] = Field(
        None, alias='<style_name>', description=''
    )


class Label483(BaseModel):
    """
    <p>Label in mark area.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich529] = Field(
        None,
        description='<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',
    )


class ItemStyle361(HandleStyle1):
    """
    <p>Style of the mark area.</p>

    """

    pass


class _StyleName530(_StyleName3):
    pass


class Rich530(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName530] = Field(
        None, alias='<style_name>', description=''
    )


class Label484(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich530] = Field(
        None,
        description='<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',
    )


class ItemStyle362(HandleStyle1):
    pass


class Emphasis167(BaseModel):
    """
    <p>Emphasis status of mark area.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label484] = Field(None, description='')
    itemStyle: Optional[ItemStyle362] = Field(None, description='')


class _StyleName531(_StyleName3):
    pass


class Rich531(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName531] = Field(
        None, alias='<style_name>', description=''
    )


class Label485(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich531] = Field(
        None,
        description='<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',
    )


class ItemStyle363(HandleStyle1):
    pass


class Blur137(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state. Whether to blur follows the series.</p>

    """

    label: Optional[Label485] = Field(None, description='')
    itemStyle: Optional[ItemStyle363] = Field(None, description='')


class ItemStyle364(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName532(_StyleName3):
    pass


class Rich532(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName532] = Field(
        None, alias='<style_name>', description=''
    )


class Label486(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich532] = Field(
        None,
        description='<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',
    )


class ItemStyle365(HandleStyle1):
    pass


class _StyleName533(_StyleName3):
    pass


class Rich533(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName533] = Field(
        None, alias='<style_name>', description=''
    )


class Label487(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich533] = Field(
        None,
        description='<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',
    )


class Emphasis168(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle365] = Field(None, description='')
    label: Optional[Label487] = Field(None, description='')


class ItemStyle366(HandleStyle1):
    pass


class _StyleName534(_StyleName3):
    pass


class Rich534(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName534] = Field(
        None, alias='<style_name>', description=''
    )


class Label488(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich534] = Field(
        None,
        description='<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',
    )


class Blur138(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle366] = Field(None, description='')
    label: Optional[Label488] = Field(None, description='')


class Field027(BaseModel):
    """
    <p>Specify the left-top point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-pictorialBar.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-pictorialBar.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'start',
        description='<p>Name of the marker, which will display as a label.</p>\n',
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle364] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label486] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis168] = Field(None, description='')
    blur: Optional[Blur138] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class ItemStyle367(HandleStyle1):
    """
        <p>Style of the item.
    <code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>

    """

    pass


class _StyleName535(_StyleName3):
    pass


class Rich535(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName535] = Field(
        None, alias='<style_name>', description=''
    )


class Label489(BaseModel):
    """
        <p>Label style of the item.
    Label style of start point and end point will be merged together.</p>

    """

    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich535] = Field(
        None,
        description='<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',
    )


class ItemStyle368(HandleStyle1):
    pass


class _StyleName536(_StyleName3):
    pass


class Rich536(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName536] = Field(
        None, alias='<style_name>', description=''
    )


class Label490(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich536] = Field(
        None,
        description='<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',
    )


class Emphasis169(BaseModel):
    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    itemStyle: Optional[ItemStyle368] = Field(None, description='')
    label: Optional[Label490] = Field(None, description='')


class ItemStyle369(HandleStyle1):
    pass


class _StyleName537(_StyleName3):
    pass


class Rich537(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName537] = Field(
        None, alias='<style_name>', description=''
    )


class Label491(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        None,
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#fff',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    align: Optional[str] = Field(
        None,
        description='\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',
    )
    verticalAlign: Optional[str] = Field(
        None,
        description='\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',
    )
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich537] = Field(
        None,
        description='<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',
    )


class Blur139(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>

    """

    itemStyle: Optional[ItemStyle369] = Field(None, description='')
    label: Optional[Label491] = Field(None, description='')


class Field127(BaseModel):
    """
    <p>Specify the right-bottom point.</p>

    """

    type: Optional[str] = Field(
        None,
        description='\n\n<p>Specify this item is on min or max or average value.</p>\n<p><strong>Options:</strong></p>\n<ul>\n<li><code class="codespan">&#39;min&#39;</code> max value.</li>\n<li><code class="codespan">&#39;max&#39;</code> min value.</li>\n<li><code class="codespan">&#39;average&#39;</code> average value.</li>\n</ul>\n',
    )
    valueIndex: Optional[float] = Field(
        None,
        description='\n\n<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-pictorialBar.markArea.data.type">type</a> used.\nThe value can be <code class="codespan">0</code> (means xAxis, radiusAxis) or <code class="codespan">1</code> (means yAxis, angleAxis),\nusing the dimension of the first axis by default.</p>\n',
    )
    valueDim: Optional[str] = Field(
        None,
        description='<p>Specify the dimension on which min, max, average are calculated,\navailable when <a href="#series-pictorialBar.markArea.data.type">type</a> used.\nThe value can be the name of the dimension (for example, the value can be <code class="codespan">x</code>, <code class="codespan">angle</code> in line chart, and <code class="codespan">open</code>, <code class="codespan">close</code> in candlestick).</p>\n',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>The format is [start coordinate, end coordinate], where the coordinate system can be <code class="codespan">x</code>, <code class="codespan">y</code> on <a href="#grid">cartesian</a>, or <code class="codespan">radius</code>, <code class="codespan">angle</code> on <a href="#polar">polar</a>.</p>\n',
    )
    name: Optional[str] = Field(
        'end', description='<p>Name of the marker, which will display as a label.</p>\n'
    )
    x: Optional[float] = Field(
        None,
        description='\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',
    )
    y: Optional[float] = Field(
        None,
        description='\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',
    )
    value: Optional[float] = Field(
        None, description='<p>value of the item, not necessary.</p>\n'
    )
    itemStyle: Optional[ItemStyle367] = Field(
        None,
        description='<p>Style of the item.\n<code class="codespan">itemStyle</code> of start point and end point will be merged together.</p>\n',
    )
    label: Optional[Label489] = Field(
        None,
        description='<p>Label style of the item.\nLabel style of start point and end point will be merged together.</p>\n',
    )
    emphasis: Optional[Emphasis169] = Field(None, description='')
    blur: Optional[Blur139] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n',
    )


class Data29(BaseModel):
    """
        <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>
    <ol>
    <li>Specify the coordinate in screen coordinate system using <a href="#series-pictorialBar.markArea.data.0.x">x</a>, <a href="#series-pictorialBar.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>
    </ol>
    <ol start="2">
    <li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using
    <a href="#series-pictorialBar.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>
    </li>
    <li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-pictorialBar.markArea.data.0.type">type</a>, where <a href="#series-pictorialBar.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-pictorialBar.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>
    </li>
    <li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>
    </ol>
    <p>The priority follows as above if more than one above definition used.</p>
    <pre><code>data: [


        [
            {
                name: &#39;From average to max&#39;,
                type: &#39;average&#39;
            },
            {
                type: &#39;max&#39;
            }
        ],

        [
            {
                name: &#39;Mark area between two points in data coordiantes&#39;,
                coord: [10, 20]
            },
            {
                coord: [20, 30]
            }
        ], [
            {
                name: &#39;From 60 to 80&#39;,
                yAxis: 60
            },
            {
                yAxis: 80
            }
        ], [
            {
                name: &#39;Mark area covers all data&#39;
                coord: [&#39;min&#39;, &#39;min&#39;]
            },
            {
                coord: [&#39;max&#39;, &#39;max&#39;]
            }
        ],
    [
            {
                name: &#39;Mark area in two screen points&#39;,
                x: 100,
                y: 100
            }, {
                x: &#39;90%&#39;,
                y: &#39;10%&#39;
            }
        ]
    ]
    </code></pre>
    """

    field_0: Optional[Field027] = Field(
        None, alias='0', description='<p>Specify the left-top point.</p>\n'
    )
    field_1: Optional[Field127] = Field(
        None, alias='1', description='<p>Specify the right-bottom point.</p>\n'
    )


class MarkArea13(BaseModel):
    """
    <p>Used to mark an area in chart. For example, mark a time interval.</p>

    """

    silent: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    label: Optional[Label483] = Field(None, description='<p>Label in mark area.</p>\n')
    itemStyle: Optional[ItemStyle361] = Field(
        None, description='<p>Style of the mark area.</p>\n'
    )
    emphasis: Optional[Emphasis167] = Field(
        None, description='<p>Emphasis status of mark area.</p>\n'
    )
    blur: Optional[Blur137] = Field(
        None,
        description='<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',
    )
    data: Optional[Data29] = Field(
        None,
        description='<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-pictorialBar.markArea.data.0.x">x</a>, <a href="#series-pictorialBar.markArea.data.0.y">y</a>, where the unit is pixel (e.g., the value is <code class="codespan">5</code>), or percent (e.g., the value is <code class="codespan">&#39;35%&#39;</code>).</li>\n</ol>\n<ol start="2">\n<li><p>Specify the coordinate in data coordinate system (i.e., cartesian) using\n<a href="#series-pictorialBar.markArea.data.0.coord">coord</a>, which can be also set as <code class="codespan">&#39;min&#39;</code>, <code class="codespan">&#39;max&#39;</code>, <code class="codespan">&#39;average&#39;</code> (e.g, <code class="codespan">coord: [23, &#39;min&#39;]</code>, or <code class="codespan">coord: [&#39;average&#39;, &#39;max&#39;]</code>).</p>\n</li>\n<li><p>Locate the point on the min value or max value of <code class="codespan">series.data</code> using <a href="#series-pictorialBar.markArea.data.0.type">type</a>, where <a href="#series-pictorialBar.markArea.data.0.valueIndex">valueIndex</a> or <a href="#series-pictorialBar.markPoint.data.0.valueDim">valueDim</a> can be used to specify the dimension on which the min, max or average are calculated.</p>\n</li>\n<li>If in cartesian, you can only specify <code class="codespan">xAxis</code> or <code class="codespan">yAxis</code> to define a mark area based on only X or Y axis, see sample <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-weight" target="_blank">scatter-weight</a></li>\n</ol>\n<p>The priority follows as above if more than one above definition used.</p>\n<pre><code>data: [\n\n\n    [\n        {\n            name: &#39;From average to max&#39;,\n            type: &#39;average&#39;\n        },\n        {\n            type: &#39;max&#39;\n        }\n    ],\n\n    [\n        {\n            name: &#39;Mark area between two points in data coordiantes&#39;,\n            coord: [10, 20]\n        },\n        {\n            coord: [20, 30]\n        }\n    ], [\n        {\n            name: &#39;From 60 to 80&#39;,\n            yAxis: 60\n        },\n        {\n            yAxis: 80\n        }\n    ], [\n        {\n            name: &#39;Mark area covers all data&#39;\n            coord: [&#39;min&#39;, &#39;min&#39;]\n        },\n        {\n            coord: [&#39;max&#39;, &#39;max&#39;]\n        }\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>',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )


class UniversalTransition11(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    enabled: Optional[bool] = Field(
        False,
        description='<p>Wheather to enable the universal transition animation.</p>\n',
    )
    seriesKey: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    divideShape: Optional[str] = Field(
        None,
        description='<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',
    )
    delay: Optional[Any] = Field(
        None,
        description='<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',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Specify the delay time before animation start. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1" width="800" height="400"></iframe>\n\n',
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Specify the delay time before update animation. Callback function can be used, where different delay time can be used on different element.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (dataIndex, params) {\n    return params.index * 30;\n}\n// Or inverse:\nanimationDelay: function (dataIndex, params) {\n    return (params.count - 1 - params.index) * 30;\n}\n</code></pre>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n\n\n\n',
    )


class TextStyle50(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip36(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle50] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series20(BaseModel):
    """
        <p><strong>pictorial bar chart</strong></p>
    <p>Pictorial bar chart is a type of bar chart that customized glyph (like images, <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>) can be used instead of rectangular bar. This kind of chart is usually used in infographic.</p>
    <p>Pictorial bar chart can only be used in <a href="#grid">rectangular coordinate</a> with at least 1 category axis.</p>
    <p><strong>Example:</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=pictorialBar-hill&reset=1&edit=1" width="800" height="400"></iframe>



    <p><strong>Layout</strong></p>
    <p>Basically <code class="codespan">pictorialBar</code> is a type of bar chart, which follows the bar chart layout. In <code class="codespan">pictorialBar</code>, each bar is named as <code class="codespan">reference bar</code>, which does not be shown, but only be used as a reference for layout of pictorial graphic elements. Each pictorial graphic element is positioned with respect to its <code class="codespan">reference bar</code> according to the setting of <a href="#series-pictorialBar.symbolPosition">symbolPosition</a>、<a href="#series-pictorialBar.symbolOffset">symbolOffset</a>.</p>
    <p>See the example below:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1" width="800" height="600"></iframe>


    <p><a href="#series-pictorialBar.symbolSize">symbolSize</a> is used to specify the size of graphic elements.</p>
    <p>See the example below:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1" width="800" height="600"></iframe>




    <p><strong>Graphic types</strong></p>
    <p><a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> can be</p>
    <p>Graphic elements can be set as &#39;repeat&#39; or not by <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a>.</p>
    <ul>
    <li>If set as <code class="codespan">false</code> (default), a single graphic element is used to represent a data item.</li>
    <li>If set as <code class="codespan">true</code>, a group of repeat graphic elements are used to represent a data item.</li>
    </ul>
    <p>See the example below:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1" width="800" height="400"></iframe>


    <p>Each graphic element can be basic shape (like <code class="codespan">&#39;circle&#39;</code>, <code class="codespan">&#39;rect&#39;</code>, ...), or <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>, or image. See <a href="#series-pictorialBar.symbolType">symbolType</a>.</p>
    <p>See the example below:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1" width="800" height="400"></iframe>


    <p><a href="#series-pictorialBar.symbolClip">symbolClip</a> can be used to clip graphic elements.</p>
    <p>See the example below:</p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1" width="800" height="600"></iframe>


    """

    type: Optional[str] = Field('pictorialBar', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    coordinateSystem: Optional[str] = Field(
        'cartesian2d',
        description='<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-pictorialBar.xAxisIndex">xAxisIndex</a> and <a href="#series-pictorialBar.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    cursor: Optional[str] = Field(
        'pointer',
        description='\n\n<p>The mouse style when mouse hovers on an element, the same as <code class="codespan">cursor</code> property in <code class="codespan">CSS</code>.</p>\n',
    )
    label: Optional[Label461] = Field(
        None,
        description='<p>Text label of , to explain some data information about graphic item like value, name and so on. <code class="codespan">label</code> is placed under <code class="codespan">itemStyle</code> in ECharts 2.x. In ECharts 3, to make the configuration structure flatter, <code class="codespan">label</code>is taken to be at the same level with <code class="codespan">itemStyle</code>, and has <code class="codespan">emphasis</code> as <code class="codespan">itemStyle</code> does.</p>\n',
    )
    labelLine: Optional[LabelLine71] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    labelLayout: Optional[LabelLayout15] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle348] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    emphasis: Optional[Emphasis160] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur131] = Field(
        None,
        description='<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-pictorialBar.emphasis.focus">emphasis.focus</a> is set.</p>\n',
    )
    select: Optional[Select42] = Field(
        None,
        description='<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-pictorialBar.selectedMode">selectedMode</a> is set.</p>\n',
    )
    selectedMode: Optional[SelectedMode] = Field(
        False,
        description='<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',
    )
    barWidth: Optional[Union[float, str]] = Field(
        None,
        description='<p>The width of the bar. Adaptive when not specified.</p>\n\n\n\n\n<p>Can be an absolute value like <code class="codespan">40</code> or a percent value like <code class="codespan">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;pictorialBar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;pictorialBar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;pictorialBar&#39;</code> series in the coordinate system.</p>\n',
    )
    barMaxWidth: Optional[Union[float, str]] = Field(
        None,
        description='<p>The maximum width of the bar.</p>\n<p>Has higer priority than <a href="#series-bar.barWidth">barWidth</a>.</p>\n<p>Can be an absolute value like <code class="codespan">40</code> or a percent value like <code class="codespan">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;pictorialBar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;pictorialBar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;pictorialBar&#39;</code> series in the coordinate system.</p>\n',
    )
    barMinWidth: Optional[Union[float, str]] = Field(
        None,
        description='<p>The minimum width of the bar. In cartesian the default value is <code class="codespan">1</code>, otherwise the default value if <code class="codespan">null</code>.</p>\n<p>Has higer priority than <a href="#series-bar.barWidth">barWidth</a>.</p>\n<p>Can be an absolute value like <code class="codespan">40</code> or a percent value like <code class="codespan">&#39;60%&#39;</code>. The percent is based on the calculated category width.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;pictorialBar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;pictorialBar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;pictorialBar&#39;</code> series in the coordinate system.</p>\n',
    )
    barMinHeight: Optional[float] = Field(
        0,
        description='<p>The minimum width of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small.</p>\n',
    )
    barMinAngle: Optional[float] = Field(
        0,
        description='<p>The minimum angle of bar. It could be used to avoid the following situation: the interaction would be affected when the value of some data item is too small. Valid only for bar series on polar coordinates.</p>\n\n',
    )
    barGap: Optional[str] = Field(
        '-100%',
        description='<p>The gap between bars between different series, is a percent value like <code class="codespan">&#39;30%&#39;</code>, which means <code class="codespan">30%</code> of the bar width.</p>\n<p>Set barGap as <code class="codespan">&#39;-100%&#39;</code> can overlap bars that belong to different series, which is useful when making a series of bar be background.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;pictorialBar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;pictorialBar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;pictorialBar&#39;</code> series in the coordinate system.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/barGrid-barGap&reset=1&edit=1" width="600" height="400"></iframe>\n\n',
    )
    barCategoryGap: Optional[str] = Field(
        '20%',
        description='<p>The bar gap of a single series, defaults to be <code class="codespan">20%</code> of the category gap, can be set as a fixed value.</p>\n<p>In a single coodinate system, this attribute is shared by multiple <code class="codespan">&#39;pictorialBar&#39;</code> series. This attribute should be set on the last <code class="codespan">&#39;pictorialBar&#39;</code> series in the coodinate system, then it will be adopted by all <code class="codespan">&#39;pictorialBar&#39;</code> series in the coordinate system.</p>\n',
    )
    symbol: Optional[str] = Field(
        'circle',
        description='<p>Specify the type of graphic elements.</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>Example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-graphicType&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbol">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbol">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbol: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbol: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbol: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolSize: Optional[Union[float, Any]] = Field(
        "['100%', '100%']",
        description='\n\n<p>Symbol size.</p>\n<p>It can be set as a array, which means [width, height]. For example, <code class="codespan">[20, 10]</code> means width <code class="codespan">20</code> and height <code class="codespan">10</code>. It can also be set as a single number, like <code class="codespan">10</code>, which is equivalent to <code class="codespan">[10, 10]</code>.</p>\n<p>Absolute value can be used (like <code class="codespan">10</code>), or percent value can be used (like <code class="codespan">&#39;120%&#39;</code>, <code class="codespan">[&#39;55%&#39;, 23]</code>).</p>\n<p>When percent value is used, final size of the graphic element is calculated based on its <a href="#series-pictorialBar">reference bar</a>.</p>\n<p>For example, there is a reference bar based on x axis (that is, it is a vertical bar), and <a href="#series-pictorialBar.symbolSize">symbolSize</a> is set as <code class="codespan">[&#39;30%&#39;, &#39;50%&#39;]</code>, the final size of its graphic elements is:</p>\n<ul>\n<li>width: <code class="codespan">&lt;width of reference bar&gt; * 30%</code>.</li>\n<li>height:<ul>\n<li>If <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used: <code class="codespan">&lt;height of reference bar&gt; * 50%</code>.</li>\n<li>If <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is not used: <code class="codespan">&lt;height of reference bar&gt; * 50%</code>.</li>\n</ul>\n</li>\n</ul>\n<p>Analogously, the case that based on y axis can be obtained by exchanging them.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-symbolSize&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolSize">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolSize">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolPosition: Optional[str] = Field(
        'start',
        description='\n\n<p>Specify the location of the graphic elements. Optional values:</p>\n<ul>\n<li><code class="codespan">&#39;start&#39;</code>: The edge of graphic element inscribes with the start of the reference bar.</li>\n<li><code class="codespan">&#39;end&#39;</code>: The edge of graphic element inscribes with the end of the reference bar.</li>\n<li><code class="codespan">&#39;center&#39;</code>: The graphic element is at the center of the reference bar.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolPosition">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolPosition">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolPosition: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPosition: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPosition: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolOffset: Optional[Any] = Field(
        '[0, 0]',
        description='\n\n<p>Specify the offset of graphic element according to its original position. Adopting <code class="codespan">symbolOffset</code> is the final step in layout, which enables adjustment of graphic element position.</p>\n<p>A absolute value can be set (like <code class="codespan">10</code>), or a percent value can be set (like <code class="codespan">&#39;120%&#39;</code>、<code class="codespan">[&#39;55%&#39;, 23]</code>), which is based on its <a href="#series-pictorialBar.symbolSize">symbolSize</a>.</p>\n<p>For example, <code class="codespan">[0, &#39;-50%&#39;]</code> means the graphic element will be adjusted upward half of the size of itself.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-position&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolOffset">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolOffset">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolOffset: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolOffset: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolOffset: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolRotate: Optional[float] = Field(
        None,
        description='\n\n<p>The degree of the rotation of a graphic element.</p>\n<p>Notice, <code class="codespan">symbolRotate</code> will not affect the position of the graphic element, but just rotating by its center.</p>\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolRotate">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolRotate">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolRotate: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRotate: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRotate: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolRepeat: Optional[Union[bool, float, str]] = Field(
        None,
        description='\n\n<p>Whether to repeat a graphic element. Optional values:</p>\n<ul>\n<li><code class="codespan">false</code>/<code class="codespan">null</code>/<code class="codespan">undefined</code>: Do not repeat, that is, each graphic element represents a data item.</li>\n<li><code class="codespan">true</code>: Repeat, that is, a group of repeated graphic elements represent a data item. The repeat times is calculated according to <a href="#series-pictorialBar.data">data</a>.</li>\n<li>a number: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is always the given number.</li>\n<li><code class="codespan">&#39;fixed&#39;</code>: Repeat, that is a group of repeated graphic elements represent a data item. The repeat times is calcuated according to <a href="#series-pictorialBar.symbolBoundingData">symbolBoundingData</a>, that is, the repeat times has nothing to do with <a href="#series-pictorialBar.data">data</a>. The setting is useful when graphic elements are used as background.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeat&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolRepeat">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolRepeat">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolRepeat: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeat: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeat: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolRepeatDirection: Optional[str] = Field(
        'start',
        description='\n\n<p>When <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used, <code class="codespan">symbolRepeatDirection</code> specifies the render order of the repeated graphic elements. The setting is useful in these cases below:</p>\n<ul>\n<li><p>If <a href="#series-pictorialBar.symbolMargin">symbolMargin</a> is set as a negative value, repeated elements will overlap with each other. <code class="codespan">symbolRepeatDirection</code> can be used to specify the order of overlap.</p>\n</li>\n<li><p>If <a href="#series-pictorialBar.animationDelay">animationDelay</a> or <a href="#series-pictorialBar.animationDelayUpdate">animationDelayUpdate</a> is used, <code class="codespan">symbolRepeatDirection</code> specifies the order of index.</p>\n</li>\n</ul>\n<p>Optional values can be <code class="codespan">&#39;start&#39;</code> and <code class="codespan">&#39;end&#39;</code>.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatDirection&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolRepeatDirection">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolRepeatDirection">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolRepeatDirection: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolRepeatDirection: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolRepeatDirection: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolMargin: Optional[Union[float, str]] = Field(
        None,
        description='\n\n<p>Specify margin of both sides of a graphic element. (&quot;both sides&quot; means the two sides in the direction of its value axis). It works only when <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used.</p>\n<p>Absolute value can be used (like <code class="codespan">20</code>), or percent value can be used (like <code class="codespan">&#39;-30%&#39;</code>), which is based on its <a href="#series-pictorialBar.symbolSize">symbolSize</a>.</p>\n<p><code class="codespan">symbolMargin</code> can be positive value or negative value, which enables overlap of graphic elements when <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used.</p>\n<p>A <code class="codespan">&quot;!&quot;</code> can be appended on the end of the value, like <code class="codespan">&quot;30%!&quot;</code> or <code class="codespan">25!</code>, which means a extra blank will be added on the both ends, otherwise the graphic elements on both ends will reach the boundary by default.</p>\n<p>Notice:</p>\n<ul>\n<li>When <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is <code class="codespan">true</code>/<code class="codespan">&#39;fixed&#39;</code>:\n  The given <code class="codespan">symbolMargin</code> is just a reference value. The final gap of graphic elements will be calculated according to <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a>, <code class="codespan">symbolMargin</code> and <a href="#series-pictorialBar.symbolBoundingData">symbolBoundingData</a>.</li>\n<li>When <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is set as a number:\n  <code class="codespan">symbolMargin</code> does not work any more.</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolMargin">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolMargin">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolMargin: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolMargin: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolMargin: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolClip: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to clip graphic elements.</p>\n<ul>\n<li><code class="codespan">false</code>/null/undefined: The whole graphic elements represent the size of value.</li>\n<li><code class="codespan">true</code>: The clipped graphic elements reperent the size of value.</li>\n</ul>\n<p><code class="codespan">symbolClip</code> is usually used in this case: both &quot;amount value&quot; and &quot;current value&quot; should be displayed. In this case, tow series can be used. One for background, using complete graphic elements, while another for current value, using clipped graphic elements.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n<p>Notice, in the example above,</p>\n<ul>\n<li>The same <a href="#series.pictorialBar.symbolBoundingData">symbolBoundingData</a> is used in &quot;background series&quot; and &quot;current value seires&quot;, which makes their graphic elements are the same size.</li>\n<li>A bigger <a href="#series.pictorialBar.z">z</a> is set on &quot;current value series&quot;, which makes it is over &quot;background series&quot;.</li>\n</ul>\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolClip">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolClip">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolClip: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolClip: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolClip: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolBoundingData: Optional[float] = Field(
        None,
        description='<p>Defines a bounding area availble for the graphic elements. This setting gives a data, which will then be translated to a coordinate on the coordinate system. The coordinate specifies the bounding. Namely, if <code class="codespan">symbolBoundingData</code> is set, the final size (or layout) of the graphic elements depend on the <code class="codespan">symbolBoundingData</code>.</p>\n<p>When reference bar is horizontal, <code class="codespan">symbolBoundingData</code> is coresponding to x axis, while reference bar is vertical, <code class="codespan">symbolBoundingData</code> is coresponding to y axis.</p>\n<p>Rule:</p>\n<ul>\n<li><p>If <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is not used:</p>\n<p>  <code class="codespan">symbolBoundingData</code> is the same as the size of reference bar by default. The size of the graphic element is detemined by <code class="codespan">symbolBoundingData</code>. For example, if reference bar is vertical, its data is <code class="codespan">24</code>, <code class="codespan">symbolSize</code> is set as <code class="codespan">[30, &#39;50%&#39;]</code>, <code class="codespan">symbolBoundingData</code> is set as <code class="codespan">124</code>, the final size of the graphic element will be <code class="codespan">124 * 50% = 62</code>. If <code class="codespan">symbolBoundingData</code> is not set, the final size will be <code class="codespan">24 * 50% = 12</code>.</p>\n</li>\n<li><p>If <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used:</p>\n<p>  <code class="codespan">symbolBoundingData</code> is the extreme value of the coordinate system. <code class="codespan">symbolBoundingData</code> defines a bounding area, where repeated graphic elements layout according to <a href="#series-pictorialBar.symbolMargin">symbolMargin</a> and <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> and <a href="#series-pictorialBar.symbolSize">symbolSize</a>. Both these settings determine the gap size of the repeated graphic elements.</p>\n</li>\n</ul>\n<p><code class="codespan">symbolBoundingData</code> is usually used in these cases:</p>\n<ul>\n<li><p>When <a href="#series-pictorialBar.symbolClip">symbolCilp</a> is used:</p>\n<p>  And a series is used to display &quot;amont value&quot;, while another series is used to display &quot;current value&quot;. <code class="codespan">symbolBoundingData</code> can be used to ensure that the graphic elements of these two series are at the same size.</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-clip&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n<ul>\n<li><p>When <a href="#series-pictorialBar.symbolRepeat">symbolRepeat</a> is used:</p>\n<p>  <code class="codespan">symbolBoundingData</code> can be use to ensure the gaps of the elements in different bars are the same. Of cource, you can do not set <code class="codespan">symbolBoundingData</code>, whose default value is a stable value (extreme value of the coordinate system).</p>\n</li>\n</ul>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-repeatLayout&reset=1&edit=1" width="800" height="600"></iframe>\n\n\n<p><br>\n<code class="codespan">symbolBoundingData</code> can also be an array, such as <code class="codespan">[-40, 60]</code>, which specifies both negative and positive symbolBoundingData.</p>\n<p>Check this example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-symbolBoundingDataArray&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolBoundingData">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolBoundingData">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolBoundingData: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolBoundingData: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolBoundingData: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    symbolPatternSize: Optional[float] = Field(
        400,
        description='\n\n<p>Image can be used as the pattern of graphic elements.</p>\n<pre><code class="lang-ts">var textureImg = new Image();\ntextureImg.src = &#39;data:image/jpeg;base64,...&#39;; // dataURI\n// Or\n// textureImg.src = &#39;http://example.website/xx.png&#39;; // URL\n...\nitemStyle: {\n    color: {\n        image: textureImg,\n        repeat: &#39;repeat&#39;\n    }\n}\n</code></pre>\n<p><code class="codespan">symbolPatternSize</code> specifies the size of pattern image. For example, if <code class="codespan">symbolPatternSize</code> is <code class="codespan">400</code>, the pattern image will be displayed at the size of <code class="codespan">400px * 400px</code>.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/pictorialBar-patternSize&reset=1&edit=1" width="800" height="400"></iframe>\n\n\n\n\n<p>This attribute can be set at the <a href="#series-pictorialBar.symbolPatternSize">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.symbolPatternSize">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    symbolPatternSize: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        symbolPatternSize: ... // Only affect this data item.\n    }, {\n        value: 56\n        symbolPatternSize: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    hoverAnimation: Optional[HoverAnimation] = Field(
        False,
        description='\n\n<p>Whether to enable hover animation.</p>\n<p>This attribute can be set at the <a href="#series-pictorialBar.hoverAnimation">root level of a series</a>, where all data items in the series will be affected by this attribute. And this attribute can also be set at <a href="#series-pictorialBar.data.hoverAnimation">each data item</a> in <a href="series-pictorialBar.data" target="_blank">series-pictorialBar.data</a>, where only the data item is affected by this attribute.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">series: [{\n    hoverAnimation: ... // Affect all data items.\n    data: [23, 56]\n}]\n// Or\nseries: [{\n    data: [{\n        value: 23\n        hoverAnimation: ... // Only affect this data item.\n    }, {\n        value: 56\n        hoverAnimation: ... // Only affect this data item.\n    }]\n}]\n</code></pre>\n',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum39]] = Field(
        None,
        description='<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class="codespan">data</code> specified in series, and there is <a href="#dataset">dataset</a> in option, series will use the first <a href="#dataset">dataset</a> as its datasource. If <code class="codespan">data</code> has been specified, <a href="#dataset">dataset</a> will not used.</p>\n<p><code class="codespan">series.datasetIndex</code> can be used to specify other <a href="#dataset">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class="lang-ts">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href="#grid">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#xAxis">xAxis</a> and <a href="#yAxis">yAxis</a> respectively.</li>\n<li>In <a href="#polar">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#radiusAxis">radiusAxis</a> and <a href="#angleAxis">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href="#visualMap">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href="#series.symbolSize">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href="#tooltip.formatter">tooltip.formatter</a> or <a href="#series.label.formatter">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class="codespan">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class="lang-ts">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href="#xAxis.type">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class="codespan">&#39;value&#39;</code> or <code class="codespan">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class="codespan">number</code> (like <code class="codespan">12</code>) (can also be a number in a <code class="codespan">string</code> format, like <code class="codespan">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class="codespan">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class="codespan">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class="lang-ts">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-punchCard" target="_blank">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class="codespan">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class="codespan">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15" target="_blank">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href="https://momentjs.com/" target="_blank">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class="codespan">&#39;2012-03&#39;</code>, <code class="codespan">&#39;2012-03-01&#39;</code>, <code class="codespan">&#39;2012-03-01 05&#39;</code>, <code class="codespan">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class="codespan">&quot;T&quot;</code> or a space: <code class="codespan">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class="codespan">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class="codespan">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class="codespan">&#39;2012&#39;</code>, <code class="codespan">&#39;2012-3-1&#39;</code>, <code class="codespan">&#39;2012/3/1&#39;</code>, <code class="codespan">&#39;2012/03/01&#39;</code>,\n<code class="codespan">&#39;2009/6/12 2:00&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href="https://dygraphs.com/date-formats.html" target="_blank">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class="codespan">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> and <code class="codespan">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class="codespan">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href="https://momentjs.com/" target="_blank">moment</a>), or use <code class="codespan">echarts.number.parseDate</code>, or check <a href="https://dygraphs.com/date-formats.html" target="_blank">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class="codespan">value</code> reprensent real value. For example:</p>\n<pre><code class="lang-ts">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class="codespan">&#39;-&#39;</code> or <code class="codespan">null</code> or <code class="codespan">undefined</code> or <code class="codespan">NaN</code> can be used to describe that a data item does not exist (ps：<em>not exist</em> does not means its value is <code class="codespan">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n',
    )
    markPoint: Optional[MarkPoint13] = Field(
        None, description='<p>Mark point in a chart.</p>\n'
    )
    markLine: Optional[MarkLine13] = Field(
        None, description='<p>Use a line in the chart to illustrate.</p>\n'
    )
    markArea: Optional[MarkArea13] = Field(
        None,
        description='<p>Used to mark an area in chart. For example, mark a time interval.</p>\n',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in Pictorial bar chart .</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in Pictorial bar chart , 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    universalTransition: Optional[UniversalTransition11] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip36] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class _StyleName538(_StyleName3):
    pass


class Rich538(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName538] = Field(
        None, alias='<style_name>', description=''
    )


class Label492(BaseModel):
    """
    <p><code class="codespan">label</code> describes style of text labels with which each ribbon-shape river branch corresponds in theme river.</p>

    """

    show: Optional[bool] = Field(
        True, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'left',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#000',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(11, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich538] = Field(
        None,
        description='<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',
    )


class LineStyle313(LineStyle51):
    pass


class LabelLine79(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle313] = Field(None, description='')


class LabelLayout16(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class Decal27(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle370(BaseModel):
    """
    <p>style of each ribbon-shape river branch in theme river.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal27] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class _StyleName539(_StyleName3):
    pass


class Rich539(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName539] = Field(
        None, alias='<style_name>', description=''
    )


class Label493(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'left',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#000',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(11, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich539] = Field(
        None,
        description='<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',
    )


class LineStyle314(LineStyle51):
    pass


class LabelLine80(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle314] = Field(None, description='')


class ItemStyle371(ItemStyle15):
    pass


class Emphasis170(BaseModel):
    """
    <p>Configurations of emphasis state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    focus: Optional[str] = Field(
        'none',
        description='<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="http://localhost/echarts-website/examples/en/view.html?c=bar-y-category-stack&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    label: Optional[Label493] = Field(None, description='')
    labelLine: Optional[LabelLine80] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle371] = Field(None, description='')


class _StyleName540(_StyleName3):
    pass


class Rich540(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName540] = Field(
        None, alias='<style_name>', description=''
    )


class Label494(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'left',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#000',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(11, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich540] = Field(
        None,
        description='<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',
    )


class LineStyle315(LineStyle51):
    pass


class LabelLine81(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle315] = Field(None, description='')


class ItemStyle372(HandleStyle1):
    pass


class Blur140(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of blur state.</p>

    """

    label: Optional[Label494] = Field(None, description='')
    labelLine: Optional[LabelLine81] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle372] = Field(None, description='')


class _StyleName541(_StyleName3):
    pass


class Rich541(BaseModel):
    """
        <p>&quot;Rich text styles&quot; can be defined in this <code class="codespan">rich</code> property. For example:</p>
    <pre><code class="lang-ts">label: {
        // Styles defined in &#39;rich&#39; can be applied to some fragments
        // of text by adding some markers to those fragment, like
        // `{styleName|text content text content}`.
        // `&#39;\n&#39;` is the newline character.
        formatter: [
            &#39;{a|Style &quot;a&quot; is applied to this snippet}&#39;
            &#39;{b|Style &quot;b&quot; is applied to this snippet}This snippet use default style{x|use style &quot;x&quot;}&#39;
        ].join(&#39;\n&#39;),

        rich: {
            a: {
                color: &#39;red&#39;,
                lineHeight: 10
            },
            b: {
                backgroundColor: {
                    image: &#39;xxx/xxx.jpg&#39;
                },
                height: 40
            },
            x: {
                fontSize: 18,
                fontFamily: &#39;Microsoft YaHei&#39;,
                borderColor: &#39;#449933&#39;,
                borderRadius: 4
            },
            ...
        }
    }
    </code></pre>
    <p>For more details, see <a href="tutorial.html#Rich%20Text" target="_blank">Rich Text</a> please.</p>

    """

    _style_name_: Optional[_StyleName541] = Field(
        None, alias='<style_name>', description=''
    )


class Label495(BaseModel):
    show: Optional[bool] = Field(
        False, description='\n\n<p>Whether to show label.</p>\n'
    )
    position: Optional[Union[str, Any]] = Field(
        'left',
        description='\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="http://localhost/echarts-website/examples/en/view.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    distance: Optional[float] = Field(
        5,
        description='\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="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/label-position" target="_blank">label position</a>.</p>\n',
    )
    rotate: Optional[float] = Field(
        None,
        description='\n\n<p>Rotate label, from -90 degree to 90, positive value represents rotate anti-clockwise.</p>\n<p>See: <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-label-rotation" target="_blank">label rotation</a>.</p>\n',
    )
    offset: Optional[Any] = Field(
        None,
        description='\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',
    )
    color: Optional[Any] = Field(
        '#000',
        description='\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',
    )
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(11, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    backgroundColor: Optional[Union[str, Any]] = Field(
        'transparent',
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0, description='\n\n<p>Border width of the text fragment.</p>\n'
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderRadius: Optional[float] = Field(
        0, description='\n\n<p>Border radius of the text fragment.</p>\n'
    )
    padding: Optional[Union[float, Any]] = Field(
        0,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text block.</p>\n'
    )
    shadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Show blur of the text block.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text block.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text block.</p>\n'
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None,
        description='\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',
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )
    rich: Optional[Rich541] = Field(
        None,
        description='<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',
    )


class LineStyle316(LineStyle51):
    pass


class LabelLine82(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    lineStyle: Optional[LineStyle316] = Field(None, description='')


class ItemStyle373(HandleStyle1):
    pass


class Select44(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configurations of select state.</p>

    """

    disabled: Optional[bool] = Field(
        None,
        description='\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',
    )
    label: Optional[Label495] = Field(None, description='')
    labelLine: Optional[LabelLine82] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    itemStyle: Optional[ItemStyle373] = Field(None, description='')


class Datum41(BaseModel):
    date: Optional[str] = Field(
        None, description='<p>the time attribute of time and theme.</p>\n'
    )
    value: Optional[float] = Field(
        None, description='<p>the value of an event or theme at a time point.</p>\n'
    )
    name: Optional[str] = Field(
        None, description='<p>the name of an event or theme.</p>\n'
    )


class TextStyle51(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip37(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle51] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series21(BaseModel):
    """
        <p><strong> Theme river </strong></p>
    <p>It is a special flow graph which is mainly used to present the changes of an event or theme during a period.</p>
    <p><strong>Sample: </strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=themeRiver-lastfm&edit=1&reset=1" width="700" height="580"></iframe>



    <p><br>
    <strong>visual encoding: </strong></p>
    <p>The ribbon-shape river branches in different colors in theme river encode variable events or themes. The width of river branches encode the value of the original dataset.</p>
    <p>What&#39;s more, the time attribute of the orinigal dataset would map to a single time axis.</p>

    """

    type: Optional[str] = Field('themeRiver', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'data',
        description='\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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in , which controls order of drawing graphical components. Components with smaller <code class="codespan">z</code> values may be overwritten by those with larger <code class="codespan">z</code> values.</p>\n<p><code class="codespan">z</code> has a lower priority to <code class="codespan">zlevel</code>, and will not create new Canvas.</p>\n',
    )
    left: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between thmemRiver component and the left side of the container.</p>\n<p><code class="codespan">left</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>.</p>\n<p>If the <code class="codespan">left</code> value is set to be <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, or <code class="codespan">&#39;right&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    top: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between thmemRiver component and the top side of the container.</p>\n<p><code class="codespan">top</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>; and it can also be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>If the <code class="codespan">top</code> value is set to be <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, or <code class="codespan">&#39;bottom&#39;</code>, then the component will be aligned automatically based on position.</p>\n',
    )
    right: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between thmemRiver component and the right side of the container.</p>\n<p><code class="codespan">right</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    bottom: Optional[Union[str, float]] = Field(
        '5%',
        description='<p>Distance between thmemRiver component and the bottom side of the container.</p>\n<p><code class="codespan">bottom</code> value can be instant pixel value like <code class="codespan">20</code>; it can also be a percentage value relative to container width like <code class="codespan">&#39;20%&#39;</code>.</p>\n',
    )
    width: Optional[Union[str, float]] = Field(
        None, description='<p>Width of thmemRiver component. </p>\n'
    )
    height: Optional[Union[str, float]] = Field(
        None,
        description='<p>Height of thmemRiver component. </p>\n<p><strong> Notes: </strong>\nThe positional information of the whole theme river view reuses the positional information of a single time axis, which are left, top, right and bottom.</p>\n',
    )
    coordinateSystem: Optional[str] = Field(
        '"single"',
        description='<p>coordinate. The theme river adopts sinle time axis.</p>\n',
    )
    boundaryGap: Optional[Any] = Field(
        '["10%", "10%"]',
        description='<p>The boundary gap of the direction orthogonal with coordinate axis in diagram, which is set to adjust the diagram position, keeping it on the screen center instead of the upside or downside of the screen.</p>\n',
    )
    singleAxisIndex: Optional[float] = Field(
        0,
        description='<p>The index of single time axis, which defaults to be 0 because it contains only one axis.</p>\n',
    )
    label: Optional[Label492] = Field(
        None,
        description='<p><code class="codespan">label</code> describes style of text labels with which each ribbon-shape river branch corresponds in theme river.</p>\n',
    )
    labelLine: Optional[LabelLine79] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    labelLayout: Optional[LabelLayout16] = Field(
        None,
        description='<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',
    )
    itemStyle: Optional[ItemStyle370] = Field(
        None,
        description='<p>style of each ribbon-shape river branch in theme river.</p>\n',
    )
    emphasis: Optional[Emphasis170] = Field(
        None, description='<p>Configurations of emphasis state.</p>\n'
    )
    blur: Optional[Blur140] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of blur state.</p>\n',
    )
    select: Optional[Select44] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configurations of select state.</p>\n',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    data: Optional[List[Datum41]] = Field(
        None,
        description='<pre><code class="lang-ts">data: [\n    [&quot;2015/11/09&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/10&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;DQ&quot;],\n    [&quot;2015/11/08&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/09&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/10&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/12&quot;,10,&quot;SS&quot;],\n    [&quot;2015/11/13&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/08&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/11&quot;,10,&quot;QG&quot;],\n    [&quot;2015/11/13&quot;,10,&quot;QG&quot;],\n]\n</code></pre>\n<p><strong>data specification: </strong></p>\n<p>As what is shown above, the data format of theme river is double dimensional array. Each item of the inner array consists of the time attribute , the value at a time point and the name of an event or theme. It needs to be noticed that you should provide an event or theme with a complete time quantum as main river. Other events and themes are based on the main river. The default value of time point should be set as 0. That is to say other events or themes are included in the main river. Once they are beyond the main river, the layout would be wrong. That is because a baseline should be calculated to draw each event as ribbon shape when the whole diagram layout is calculated. As the example above, the event &quot;SS&quot; is a main river. After dispose, we would complete these 3 default time points with the format of [&quot;2015/11/08&quot;,0,&quot;DQ&quot;], [&quot;2015/11/12&quot;,0,&quot;DQ&quot;], ［&quot;2015/11/13&quot;,0,&quot;DQ&quot;］, making it align with the main river. From what is mentioned, we could set default value on any position of a complete time period.</p>\n',
    )
    tooltip: Optional[Tooltip37] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class Api(BaseModel):
    """
    <p>The second parameter of <code class="codespan">renderItem</code>.</p>

    """

    value: Optional[Any] = Field(
        None,
        description='<p>Get value on the given dimension.</p>\n<pre><code>@param {number} dimension The given dimension. (index from 0).\n@param {number} [dataIndexInside] In most cases it is not necessary.\n@return {number} The value.\n</code></pre>',
    )
    coord: Optional[Any] = Field(
        None,
        description='<p>Convert data to coordinate.</p>\n<pre><code>@param {Array.&lt;number&gt;} data.\n@return {Array.&lt;number&gt;} Point on canvas, at least includes [x, y].\n        In polar, it also contains:\n        polar: [x, y, radius, angle]\n</code></pre>',
    )
    size: Optional[Any] = Field(
        None,
        description='<p>Get the size by the given data range.</p>\n<p>For example, in <code class="codespan">cartesian2d</code>, suppose calling <code class="codespan">api.size([2, 4])</code> returns <code class="codespan">[12.4, 55]</code>. It represents that on x axis, data range <code class="codespan">2</code> corresponds to size <code class="codespan">12.4</code>, and on y axis data range <code class="codespan">4</code> corresponds to size <code class="codespan">55</code>.</p>\n<p>In some coordinate systems (for example, polar) or when log axis is used, the size is different in different point. So the second parameter is necessary to calculate size on the given point.</p>\n<pre><code>@param {Array.&lt;number&gt;} dataSize Data range.\n@param {Array.&lt;number&gt;} dataItem The point where the size will be calculated.\n@return {Array.&lt;number&gt;} The size.\n</code></pre>',
    )
    style: Optional[Any] = Field(
        None,
        description='<p>The method obtains style info defined in <a href="#series-custom.itemStyle">series.itemStyle</a>, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to <code class="codespan">style</code> attribute of graphic element definition directly. Developers can also override style info by calling this method like this: <code class="codespan">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code>.</p>\n<pre><code>@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n</code></pre>',
    )
    styleEmphasis: Optional[Any] = Field(
        None,
        description='<p>The method obtains style info defined in <a href="#series-custom.itemStyle.emphasis">series.itemStyle.emphasis</a>, and visual info obtained by visual mapping, and return them. Those returned info can be assigned to <code class="codespan">style</code> attribute of graphic element definition directly. Developers can also override style info by calling this method like this: <code class="codespan">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code>.</p>\n<pre><code>@param {Object} [extra] Extra style info.\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {Object} Style info, which can be assigned to `style` attribute of graphic element definition directly.\n</code></pre>',
    )
    visual: Optional[Any] = Field(
        None,
        description='<p>Get the visual info. It is rarely be used.</p>\n<pre><code>@param {string} visualType &#39;color&#39;, &#39;symbol&#39;, &#39;symbolSize&#39;, ...\n@param {number} [dataIndexInside] In most cases, this parameter is not necessary.\n@return {string|number} The value of visual.\n</code></pre>',
    )
    barLayout: Optional[Any] = Field(
        None,
        description='<p>When <code class="codespan">barLayout</code> is needed, (for example, when attaching some extra graphic elements to bar chart), this method can be used to obtain bar layout info.</p>\n<p>See a <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-bar-trend" target="_blank">sample</a>.</p>\n<pre><code>@param {Object} opt\n@param {number} opt.count How many bars in each group.\n@param {number|string} [opt.barWidth] Width of a bar.\n        Can be an absolute value like `40` or a percent value like `&#39;60%&#39;`.\n        The percent is based on the calculated category width.\n@param {number|string} [opt.barMaxWidth] Max width of a bar.\n        Can be an absolute value like `40` or a percent value like `&#39;60%&#39;`.\n        The percent is based on the calculated category width.\n        Has higer priority than `opt.barWidth`.\n@param {number|string} [opt.barMinWidth] Min width of a bar.\n        Can be an absolute value like `40` or a percent value like `&#39;60%&#39;`.\n        The percent is based on the calculated category width.\n        Has higer priority than `opt.barWidth`.\n@param {number} [opt.barGap] Gap of bars in a group.\n@param {number} [opt.barCategoryGap] Gap of groups.\n@return {Array.&lt;Object&gt;} [{\n        width: {number} Width of a bar.\n        offset: {number} Offset of a bar, based on the left most edge.\n        offsetCenter: {number} bar Offset of a bar, based on the center of the bar.\n    }, ...]\n</code></pre>',
    )
    currentSeriesIndices: Optional[Any] = Field(
        None,
        description='<p>Obtain the current series index. Notice that the <code class="codespan">currentSeriesIndex</code> is different from <code class="codespan">seriesIndex</code> when legend is used to filter some series.</p>\n<pre><code>@return {number}\n</code></pre>',
    )
    font: Optional[Any] = Field(
        None,
        description='<p>Obtain font string, which can be used on style setting directly.</p>\n<pre><code>@param {Object} opt\n@param {string} [opt.fontStyle]\n@param {number} [opt.fontWeight]\n@param {number} [opt.fontSize]\n@param {string} [opt.fontFamily]\n@return {string} font string.\n</code></pre>',
    )
    getWidth: Optional[Any] = Field(
        None,
        description='<pre><code>@return {number} Width of echarts containter.\n</code></pre>',
    )
    getHeight: Optional[Any] = Field(
        None,
        description='<pre><code>@return {number} Height of echarts container.\n</code></pre>',
    )
    getZr: Optional[Any] = Field(
        None,
        description='<pre><code>@return {module:zrender} zrender instance.\n</code></pre>',
    )
    getDevicePixelRatio: Optional[Any] = Field(
        None,
        description='<pre><code>@return {number} The current devicePixelRatio.\n</code></pre>',
    )


class Arguments(BaseModel):
    """
    <p>Parameters of <code class="codespan">renderItem</code>.</p>

    """

    params: Optional[Any] = Field(
        None,
        description='<p>The first parameter of <code class="codespan">renderItem</code>, including:</p>\n<pre><code class="lang-ts">{\n    context: // {string} An object that developers can store something temporarily here. Life cycle: current round of rendering.\n    seriesId: // {string} The id of this series.\n    seriesName: // {string} The name of this series.\n    seriesIndex: // {number} The index of this series.\n    dataIndex: // {number} The index of this data item.\n    dataIndexInside: // {number} The index of this data item in the current data window (see dataZoom).\n    dataInsideLength: // {number} The count of data in the current data window (see dataZoom).\n    actionType: // {string} The type of action that trigger this render.\n    coordSys: // coordSys is variable by different types of coordinate systems:\n    coordSys: {\n        type: &#39;cartesian2d&#39;,\n        x: // {number} x of grid rect\n        y: // {number} y of grid rect\n        width: // {number} width of grid rect\n        height: // {number} height of grid rect\n    },\n    coordSys: {\n        type: &#39;calendar&#39;,\n        x: // {number} x of calendar rect\n        y: // {number} y of calendar rect\n        width: // {number} width of calendar rect\n        height: // {number} height of calendar rect\n        cellWidth: // {number} calendar cellWidth\n        cellHeight: // {number} calendar cellHeight\n        rangeInfo: {\n            start: // date start of calendar.\n            end: // date end of calendar.\n            weeks: // number of weeks in calendar.\n            dayCount: // day count in calendar.\n        }\n    },\n    coordSys: {\n        type: &#39;geo&#39;,\n        x: // {number} x of geo rect\n        y: // {number} y of geo rect\n        width: // {number} width of geo rect\n        height: // {number} height of geo rect\n        zoom: // {number} zoom ratio, 1 if no zoom, 0.5 means shrink to 50%.\n    },\n    coordSys: {\n        type: &#39;polar&#39;,\n        cx: // {number} x of polar center.\n        cy: // {number} y of polar center.\n        r: // {number} outer radius of polar.\n        r0: // {number} inner radius of polar.\n    },\n    coordSys: {\n        type: &#39;singleAxis&#39;,\n        x: // {number} x of singleAxis rect\n        y: // {number} y of singleAxis rect\n        width: // {number} width of singleAxis rect\n        height: // {number} height of singleAxis rect\n    }\n}\n</code></pre>\n<p>Difference between <code class="codespan">dataIndex</code> and <code class="codespan">dataIndexInside</code>:</p>\n<ul>\n<li><code class="codespan">dataIndex</code> is the index of a <code class="codespan">dataItem</code> in the original data.</li>\n<li><code class="codespan">dataIndexInside</code> is the index of a <code class="codespan">dataItem</code> in the current data window (see <a href="#dataZoom">dataZoom</a>.</li>\n</ul>\n<p><a href="#series-custom.renderItem.arguments.api">renderItem.arguments.api</a> uses <code class="codespan">dataIndexInside</code> as the input parameter but not <code class="codespan">dataIndex</code>, because conversion from <code class="codespan">dataIndex</code> to <code class="codespan">dataIndexInside</code> is time-consuming.</p>\n',
    )
    api: Optional[Api] = Field(
        None,
        description='<p>The second parameter of <code class="codespan">renderItem</code>.</p>\n',
    )


class EnterAnimation12(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation12(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation12(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation12(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig12(TextConfig):
    pass


class Extra(BaseModel):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">extra</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    extra: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    extra: {\n        ...\n    },\n    // Indicate that all props in `extra` will\n    // have transition animation.\n    transition: &#39;extra&#39;,\n};\n</code></pre>\n',
    )


class ReturnGroup(BaseModel):
    """
    <p><code class="codespan">group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>

    """

    type: Optional[str] = Field(
        'group',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_group.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_group.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_group.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation12] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation12] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation12] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation12] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_group.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig12] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    width: Optional[float] = Field(
        0,
        description='<p>Specify width of this <code class="codespan">group</code>.</p>\n<p>This width is only used for the positioning of its children.</p>\n<p>When width is <code class="codespan">0</code>, children can also be positioned according to its parent using <code class="codespan">left: &#39;center&#39;</code>.</p>\n',
    )
    height: Optional[float] = Field(
        0,
        description='<p>Specify height of this <code class="codespan">group</code>.</p>\n<p>This height is only used for the positioning of its children.</p>\n<p>When height is <code class="codespan">0</code>, children can also be positioned according to its parent using <code class="codespan">top: &#39;middle&#39;</code>.</p>\n',
    )
    diffChildrenByName: Optional[bool] = Field(
        False,
        description='<p>In <a href="#series-custom">custom series</a>, when <code class="codespan">diffChildrenByName</code> is set as <code class="codespan">true</code>, for each <a href="#series-custom.renderItem.return_group">group</a> returned from <a href="#series-custom.renderItem">renderItem</a>, &quot;diff&quot; will be performed to its <a href="#series-custom.renderItem.return_group.children">children</a> according to the <a href="#series-custom.renderItem.return_polygon.name">name</a> attribute of each graphic elements. Here &quot;diff&quot; means that map the coming graphic elements to the existing graphic elements when repainting according to <code class="codespan">name</code>, which enables the transition animation if data is modified.</p>\n<p>But notice that the operation is performance consuming, do not use it for large data amount.</p>\n',
    )
    children: Optional[Any] = Field(
        None,
        description='<p>A list of children, each item is a declaration of an element.</p>\n',
    )


class EnterAnimation13(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation13(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation13(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation13(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig13(TextConfig):
    pass


class Extra1(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape9(BaseModel):
    pathData: Optional[str] = Field(
        None,
        description='<p><a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a>.</p>\n<p>For example, <code class="codespan">&#39;M0,0 L0,-20 L30,-20 C42,-20 38,-1 50,-1 L70,-1 L70,0 Z&#39;</code>.</p>\n<p>If <a href="#series-custom.renderItem.return_path.shape.width">width</a>, <a href="#series-custom.renderItem.return_path.shape.height">height</a>, <a href="#series-custom.renderItem.return_path.shape.x">x</a> and <a href="#series-custom.renderItem.return_path.shape.y">y</a> specified, <code class="codespan">pathData</code> will be transformed to fit the defined rect. If they are not specified, do not do that.</p>\n<p><a href="#series-custom.renderItem.return_path.shape.layout">layout</a> can be used to specify the transform strategy.</p>\n<p>See examples:\n<a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-calendar-icon" target="_blank">icons</a> and <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-gantt-flight" target="_blank">shapes</a>.</p>\n',
    )
    d: Optional[str] = Field(
        None,
        description='<p>Alias of <a href="#series-custom.renderItem.return_path.shape.pathData">pathData</a>.</p>\n',
    )
    layout: Optional[str] = Field(
        'center',
        description='<p>If <a href="#series-custom.renderItem.return_path.shape.width">width</a>, <a href="#series-custom.renderItem.return_path.shape.height">height</a>, <a href="#series-custom.renderItem.return_path.shape.x">x</a> and <a href="#series-custom.renderItem.return_path.shape.y">y</a> specified, <code class="codespan">pathData</code> will be transformed to fit the defined rect.</p>\n<p><code class="codespan">layout</code> can be used to specify the transform strategy.</p>\n<p>Optional value:</p>\n<ul>\n<li><code class="codespan">&#39;center&#39;</code>: Keep aspect ratio, put the path in the center of the rect, expand as far as possible but never overflow.</li>\n<li><code class="codespan">&#39;cover&#39;</code>: Transform the path according to the aspect ratio of the rect, fill the rect and do not overflow.</li>\n</ul>\n',
    )
    x: Optional[float] = Field(
        0,
        description='<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    y: Optional[float] = Field(
        0,
        description='<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    width: Optional[float] = Field(
        0, description='<p>The width of the shape of the element.</p>\n'
    )
    height: Optional[Any] = Field(
        0, description='<p>The height of the shape of the element.</p>\n'
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">shape</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: {\n        ...\n    },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n};\n</code></pre>\n',
    )


class Style11(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis171(BaseModel):
    """
    <p>Emphasis state of the element.</p>

    """

    style: Optional[Any] = Field(
        None,
        description='<p>Same to <a href="#series-custom.renderItem.return_polygon.style">style</a>.</p>\n',
    )


class Blur141(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select45(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnPath(BaseModel):
    """
        <p>Use <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a> to describe a path. Can be used to draw icons or any other shapes fitting the specified size by auto transforming.</p>
    <p>See examples:
    <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-calendar-icon" target="_blank">icons</a> and <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-gantt-flight" target="_blank">shapes</a>.</p>
    <p>About width/height, cover/contain, see
    <a href="#series-custom.renderItem.return_path.shape.layout">layout</a>.</p>

    """

    type: Optional[str] = Field(
        'path',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_path.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_path.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_path.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation13] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation13] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation13] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation13] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_path.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig13] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra1] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape9] = Field(None, description='')
    style: Optional[Style11] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis171] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur141] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select45] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation14(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation14(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation14(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation14(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig14(TextConfig):
    pass


class Extra2(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Style12(Style):
    pass


class Emphasis172(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur142(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select46(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnImage(BaseModel):
    type: Optional[str] = Field(
        'image',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_image.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_image.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_image.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation14] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation14] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation14] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation14] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_image.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig14] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra2] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    style: Optional[Style12] = Field(None, description='')
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis172] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur142] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select46] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation15(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation15(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation15(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation15(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig15(TextConfig):
    pass


class Extra3(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Style13(BaseModel):
    text: Optional[str] = Field(
        '',
        description='<p>Text content. <code class="codespan">\\n</code> can be used as a line break.</p>\n',
    )
    x: Optional[float] = Field(
        0,
        description='<p>The x value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    y: Optional[float] = Field(
        0,
        description='<p>The y value of the left-top corner of the element in the coordinate system of its parent.</p>\n',
    )
    font: Optional[str] = Field(
        None,
        description='<p>Font size, font type, font weight, font color, follow the form of <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font" target="_blank">css font</a>.</p>\n<p>For example:</p>\n<pre><code>// size | family\nfont: &#39;2em &quot;STHeiti&quot;, sans-serif&#39;\n\n// style | weight | size | family\nfont: &#39;italic bolder 16px cursive&#39;\n\n// weight | size | family\nfont: &#39;bolder 2em &quot;Microsoft YaHei&quot;, sans-serif&#39;\n</code></pre>',
    )
    textAlign: Optional[str] = Field(
        'left',
        description='<p>Text horizontal alignment. Optional values: <code class="codespan">&#39;left&#39;</code>, <code class="codespan">&#39;center&#39;</code>, <code class="codespan">&#39;right&#39;</code>.</p>\n<p><code class="codespan">&#39;left&#39;</code> means the left side of the text block is specified by the <a href="#series-custom.renderItem.return_text.style.x">style.x</a>, while <code class="codespan">&#39;right&#39;</code> means the right side of the text block is specified by <a href="#series-custom.renderItem.return_text.style.y">style.y</a>.</p>\n',
    )
    textVerticalAlign: Optional[str] = Field(
        None,
        description='<p>Text vertical alignment. Optional values: <code class="codespan">&#39;top&#39;</code>, <code class="codespan">&#39;middle&#39;</code>, <code class="codespan">&#39;bottom&#39;</code>.</p>\n<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    fill: Optional[str] = Field(
        '#000', description='<p>Color filled in this element.</p>\n'
    )
    stroke: Optional[str] = Field(None, description='<p>Color of stroke.</p>\n')
    lineWidth: Optional[float] = Field(0, description='<p>Width of stroke.</p>\n')
    shadowBlur: Optional[float] = Field(
        'undefined', description='<p>Width of shadow.</p>\n'
    )
    shadowOffsetX: Optional[float] = Field(
        'undefined', description='<p>X offset of shadow.</p>\n'
    )
    shadowOffsetY: Optional[float] = Field(
        'undefined', description='<p>Y offset of shadow.</p>\n'
    )
    shadowColor: Optional[float] = Field(
        'undefined', description='<p>color of shadow.</p>\n'
    )
    transition: Optional[Union[str, Any]] = Field(
        'undefined',
        description='<p>Can be a single property name or an array of property names.\nEnable transition animation when the specified properties changed.\nCan only specify properties that are under this <code class="codespan">style</code>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n        // This two props will perform transition animation.\n        transition: [&#39;mmm&#39;, &#39;ppp&#39;]\n    }\n}\n</code></pre>\n<p>We can also specify all of the properties like this:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    style: {\n        ...\n    },\n    // Indicate that all props in `style` will\n    // have transition animation.\n    transition: &#39;style&#39;,\n};\n</code></pre>\n',
    )


class Emphasis173(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur143(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select47(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnText(BaseModel):
    """
    <p>Text block.</p>

    """

    type: Optional[str] = Field(
        'text',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_text.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_text.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_text.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation15] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation15] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation15] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation15] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_text.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig15] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra3] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    style: Optional[Style13] = Field(None, description='')
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis173] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur143] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select47] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation16(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation16(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation16(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation16(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig16(TextConfig):
    pass


class Extra4(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape10(Shape):
    pass


class Style14(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis174(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur144(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select48(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnRect(BaseModel):
    """
    <p>Rectangle element.</p>

    """

    type: Optional[str] = Field(
        'rect',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_rect.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_rect.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_rect.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation16] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation16] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation16] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation16] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_rect.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig16] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra4] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape10] = Field(None, description='')
    style: Optional[Style14] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis174] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur144] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select48] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation17(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation17(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation17(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation17(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig17(TextConfig):
    pass


class Extra5(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape11(Shape1):
    pass


class Style15(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis175(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur145(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select49(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnCircle(BaseModel):
    """
    <p>Circle element.</p>

    """

    type: Optional[str] = Field(
        'circle',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_circle.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_circle.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_circle.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation17] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation17] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation17] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation17] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_circle.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig17] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra5] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape11] = Field(None, description='')
    style: Optional[Style15] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis175] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur145] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select49] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation18(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation18(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation18(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation18(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig18(TextConfig):
    pass


class Extra6(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape12(Shape2):
    pass


class Style16(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis176(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur146(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select50(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnRing(BaseModel):
    """
    <p>Ring element.</p>

    """

    type: Optional[str] = Field(
        'ring',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_ring.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_ring.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_ring.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation18] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation18] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation18] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation18] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_ring.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig18] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra6] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape12] = Field(None, description='')
    style: Optional[Style16] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis176] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur146] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select50] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation19(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation19(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation19(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation19(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig19(TextConfig):
    pass


class Extra7(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape13(Shape3):
    pass


class Style17(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis177(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur147(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select51(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnSector(BaseModel):
    """
    <p>Sector element.</p>

    """

    type: Optional[str] = Field(
        'sector',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_sector.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_sector.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_sector.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation19] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation19] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation19] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation19] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_sector.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig19] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra7] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape13] = Field(None, description='')
    style: Optional[Style17] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis177] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur147] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select51] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation20(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation20(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation20(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation20(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig20(TextConfig):
    pass


class Extra8(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape14(Shape3):
    pass


class Style18(Style6):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis178(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur148(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select52(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnArc(BaseModel):
    """
    <p>Arc element.</p>

    """

    type: Optional[str] = Field(
        'arc',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_arc.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_arc.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_arc.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation20] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation20] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation20] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation20] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_arc.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig20] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra8] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape14] = Field(None, description='')
    style: Optional[Style18] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis178] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur148] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select52] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation21(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation21(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation21(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation21(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig21(TextConfig):
    pass


class Extra9(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape15(Shape5):
    pass


class Style19(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis179(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur149(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select53(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnPolygon(BaseModel):
    """
    <p>Polygon element.</p>

    """

    type: Optional[str] = Field(
        'polygon',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_polygon.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_polygon.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_polygon.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation21] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation21] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation21] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation21] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_polygon.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig21] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra9] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape15] = Field(None, description='')
    style: Optional[Style19] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis179] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur149] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select53] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation22(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation22(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation22(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation22(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig22(TextConfig):
    pass


class Extra10(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape16(Shape5):
    pass


class Style20(Style8):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis180(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur150(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select54(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnPolyline(BaseModel):
    """
    <p>Polyline element.</p>

    """

    type: Optional[str] = Field(
        'polyline',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_polyline.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_polyline.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_polyline.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation22] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation22] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation22] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation22] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_polyline.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig22] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra10] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape16] = Field(None, description='')
    style: Optional[Style20] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis180] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur150] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select54] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation23(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation23(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation23(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation23(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig23(TextConfig):
    pass


class Extra11(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape17(Shape7):
    pass


class Style21(Style8):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis181(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur151(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select55(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnLine(BaseModel):
    """
    <p>Line element.</p>

    """

    type: Optional[str] = Field(
        'line',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_line.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_line.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_line.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation23] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation23] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation23] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation23] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_line.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig23] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra11] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape17] = Field(None, description='')
    style: Optional[Style21] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis181] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur151] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select55] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class EnterAnimation24(EnterAnimation):
    """
    <p>Configurations of enter animation.</p>

    """

    pass


class UpdateAnimation24(EnterAnimation):
    """
    <p>Configurations of update animation.</p>

    """

    pass


class LeaveAnimation24(EnterAnimation):
    """
    <p>Configurations of leave animation.</p>

    """

    pass


class KeyframeAnimation24(KeyframeAnimation):
    """
        <p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>
    <p>Example:</p>
    <pre><code class="lang-ts">keyframeAnimation: [{
        // Using scale for breath animation.
        duration: 1000,
        loop: true,
        keyframes: [{
            percent: 0.5,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 0.1,
            scaleY: 0.1
        }, {
            percent: 1,
            easing: &#39;sinusoidalInOut&#39;,
            scaleX: 1,
            scaleY: 1
        }]
    }, {
        // Translate animation.
        duration: 2000,
        loop: true,
        keyframes: [{
            percent: 0,
            x: 10
        }, {
            percent: 1,
            x: 100
        }]
    }]

    </code></pre>
    <p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>

    """

    pass


class TextConfig24(TextConfig):
    pass


class Extra12(Extra):
    """
    <p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>

    """

    pass


class Shape18(Shape8):
    pass


class Style22(Style2):
    """
        <p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>
    <p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>
    <ul>
    <li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>
    <li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>
    <li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>
    <li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>
    <li>...</li>
    </ul>

    """

    pass


class Emphasis182(Emphasis171):
    """
    <p>Emphasis state of the element.</p>

    """

    pass


class Blur152(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Blur state, available when <code class="codespan">focus</code> is set.</p>

    """

    pass


class Select56(Emphasis171):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>

    """

    pass


class ReturnBezierCurve(BaseModel):
    """
    <p>Quadratic bezier curve or cubic bezier curve.</p>

    """

    type: Optional[str] = Field(
        'bezierCurve',
        description='<p>Must be specified when define a graphic element at the first time.</p>\n<p>Optional values:</p>\n<p><a href="#series-custom.renderItem.return_image">image</a>,\n<a href="#series-custom.renderItem.return_text">text</a>,\n<a href="#series-custom.renderItem.return_circle">circle</a>,\n<a href="#series-custom.renderItem.return_sector">sector</a>,\n<a href="#series-custom.renderItem.return_ring">ring</a>,\n<a href="#series-custom.renderItem.return_polygon">polygon</a>,\n<a href="#series-custom.renderItem.return_polyline">polyline</a>,\n<a href="#series-custom.renderItem.return_rect">rect</a>,\n<a href="#series-custom.renderItem.return_line">line</a>,\n<a href="#series-custom.renderItem.return_bezierCurve">bezierCurve</a>,\n<a href="#series-custom.renderItem.return_arc">arc</a>,\n<a href="#series-custom.renderItem.return_group">group</a>,</p>\n',
    )
    id: Optional[str] = Field(
        'undefined',
        description='<p>id is used to specifying element when willing to update it.\nid can be ignored if you do not need it.</p>\n',
    )
    x: Optional[float] = Field(
        0, description='<p>x position of element. In pixels.</p>\n'
    )
    y: Optional[float] = Field(
        0, description='<p>y position of element. In pixels.</p>\n'
    )
    rotation: Optional[float] = Field(
        0, description='<p>Degree value of rotation.</p>\n'
    )
    scaleX: Optional[float] = Field(1, description='<p>Scale on x.</p>\n')
    scaleY: Optional[float] = Field(1, description='<p>Scale on y.</p>\n')
    originX: Optional[float] = Field(
        0,
        description='<p>x value of element scale and rotation origin. In pixels</p>\n',
    )
    originY: Optional[float] = Field(
        0,
        description='<p>y value of element scale and rotation origin. In pixels.</p>\n',
    )
    transition: Optional[Union[str, Any]] = Field(
        "['x', 'y']",
        description='<p>You can specify that all properties have transition animations turned on with `&#39;all&#39;&#39;, or you can specify a single property or an array of properties.</p>\n<p>The properties can be:</p>\n<p>Transform related properties:<code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;scaleX&#39;</code>, <code class="codespan">&#39;scaleY&#39;</code>, <code class="codespan">&#39;rotation&#39;</code>, <code class="codespan">&#39;originX&#39;</code>, <code class="codespan">&#39;originY&#39;</code>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    x: 100,\n    y: 200,\n    transition: [&#39;x&#39;, &#39;y&#39;]\n}\n</code></pre>\n<p>Shortcut to transition all of the properties in <a href="#series-custom.renderItem.return_bezierCurve.shape"><code class="codespan">&#39;shape&#39;</code></a>, <a href="#series-custom.renderItem.return_bezierCurve.style">&#39;<code class="codespan">style&#39;</code></a>, <a href="#series-custom.renderItem.return_bezierCurve.extra"><code class="codespan">&#39;extra&#39;</code></a>. For example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;rect&#39;,\n    shape: { // ... },\n    // Indicate that all props in `shape` will\n    // have transition animation.\n    transition: &#39;shape&#39;,\n}\n</code></pre>\n<p>In the custom series. <code class="codespan">&#39;x&#39;</code> and <code class="codespan">&#39;y&#39;</code> are transitioned by default. If you want to disable the default transition, just set it as: <code class="codespan">transition: []</code>.</p>\n<p>See this <a href="http://localhost/echarts-website/examples/en/editor.html?c=doc-example/custom-transition-simple&amp;edit=1&amp;reset=1" target="_blank">example</a> please.</p>\n',
    )
    enterFrom: Optional[Any] = Field(
        None,
        description='<p>Initial properties for enter animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    enterFrom: {\n        // Fade in\n        style: { opacity: 0 },\n        // Slide in from left\n        x: 0\n    }\n}\n</code></pre>\n',
    )
    leaveTo: Optional[Any] = Field(
        None,
        description='<p>End properties for leave animation.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">{\n    type: &#39;circle&#39;,\n    x: 100,\n    leaveTo: {\n        // Fade out\n        style: { opacity: 0 },\n        // Slide out to right\n        x: 200\n    }\n}\n</code></pre>\n',
    )
    enterAnimation: Optional[EnterAnimation24] = Field(
        None, description='<p>Configurations of enter animation.</p>\n'
    )
    updateAnimation: Optional[UpdateAnimation24] = Field(
        None, description='<p>Configurations of update animation.</p>\n'
    )
    leaveAnimation: Optional[LeaveAnimation24] = Field(
        None, description='<p>Configurations of leave animation.</p>\n'
    )
    keyframeAnimation: Optional[KeyframeAnimation24] = Field(
        None,
        description='<p>Configurations of keyframe based animation. Support for configuring an array to use multiple keyframe animations at the same time.</p>\n<p>Example:</p>\n<pre><code class="lang-ts">keyframeAnimation: [{\n    // Using scale for breath animation.\n    duration: 1000,\n    loop: true,\n    keyframes: [{\n        percent: 0.5,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 0.1,\n        scaleY: 0.1\n    }, {\n        percent: 1,\n        easing: &#39;sinusoidalInOut&#39;,\n        scaleX: 1,\n        scaleY: 1\n    }]\n}, {\n    // Translate animation.\n    duration: 2000,\n    loop: true,\n    keyframes: [{\n        percent: 0,\n        x: 10\n    }, {\n        percent: 1,\n        x: 100\n    }]\n}]\n\n</code></pre>\n<p>If both keyframe animation and transition animation are applied to a property, the transition animation is ignored.</p>\n',
    )
    morph: Optional[bool] = Field(
        False,
        description='<p>Whether to enable morphing animation.</p>\n<p>If you enabled <a href="#series-custom.universalTransition">universalTransition</a> and then the update has different types of shape, for example from <code class="codespan">rect</code> to <code class="codespan">circle</code>, it will apply the morph animation. Set this property to <code class="codespan">false</code> to turn it off.</p>\n',
    )
    z2: Optional[float] = Field(
        'undefined',
        description='<p>Define the overlap relationship between graphic elements.</p>\n',
    )
    name: Optional[str] = Field(
        'undefined',
        description='<p>See <a href="#series-custom.renderItem.return_bezierCurve.diffChildrenByName">diffChildrenByName</a>.</p>\n',
    )
    info: Optional[Any] = Field(
        None,
        description='<p>User defined data, can be visited in event listeners.</p>\n<pre><code class="lang-ts">chart.on(&#39;click&#39;, function (params) {\n    console.log(params.info);\n});\n</code></pre>\n',
    )
    silent: Optional[bool] = Field(
        False, description='<p>Whether response to mouse events / touch events.</p>\n'
    )
    invisible: Optional[bool] = Field(
        False, description='<p>Whether the element is visible.</p>\n'
    )
    ignore: Optional[bool] = Field(
        False,
        description='<p>Whether the element is totally ignored (neither render nor listen events).</p>\n',
    )
    textContent: Optional[Any] = Field(
        None,
        description='<p>Text block attached to an element and layout based on the element by <code class="codespan">textConfig</code>.</p>\n<p>The props the the same as <a href="option.html#series-custom.renderItem.return_text" target="_blank">text</a>.</p>\n',
    )
    textConfig: Optional[TextConfig24] = Field(None, description='')
    during: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">during</code> callback enable users to set props to an element in each animation frame.</p>\n<pre><code class="lang-ts">(duringAPI: CustomDuringAPI) =&gt; void\n\ninterface CustomDuringAPI {\n    // Set transform prop value.\n    // Transform prop see `TransformProp`.\n    setTransform(key: TransformProp, val: unknown): void;\n    // Get transform prop value of the current animation frame.\n    getTransform(key: TransformProp): unknown;\n    // Set shape prop value.\n    // Shape prop is like `{ type: &#39;rect&#39;, shape: { xxxProp: xxxValue } }`.\n    setShape(key: string, val: unknown): void;\n    // Get shape prop value of the current animation frame.\n    getShape(key: string): unknown;\n    // Set style prop value.\n    // Style prop is like `{ type: &#39;rect&#39;, style: { xxxProp: xxxValue } }`.\n    setStyle(key: string, val: unknown): void;\n    // Get style prop value of the current animation frame.\n    getStyle(key: string): unknown;\n    // Set extra prop value.\n    // Extra prop is like `{ type: &#39;rect&#39;, extra: { xxxProp: xxxValue } }`.\n    setExtra(key: string, val: unknown): void;\n    // Get extra prop value of the current animation frame.\n    getExtra(key: string): unknown;\n}\n\ntype TransformProp =\n    &#39;x&#39; | &#39;y&#39; | &#39;scaleX&#39; | &#39;scaleY&#39; | &#39;originX&#39; | &#39;originY&#39; | &#39;rotation&#39;;\n</code></pre>\n<p>In most cases users do not need this <code class="codespan">during</code> callback. For example, if some props are specified in <a href="option.html#series-custom.renderItem.return_rect.transition" target="_blank">transition</a>, echarts will make interpolation for these props internally and therefore have animation based on these props automatically. But if this kind of internal interpolation does not match the user requirements of animation, users can use this <code class="codespan">during</code> callback to customize them.</p>\n<p>For example, if users are using <a href="option.html#series-custom.renderItem.return_polygon" target="_blank">polygon</a> shape. The shape is described by <a href="option.html#series-custom.renderItem.return_polygon.shape.points" target="_blank">shape.points</a>, which is an points array like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...]\n    },\n    // ...\n}\n</code></pre>\n<p>If users specify them into <a href="option.html#series-custom.renderItem.return_polygon.transition" target="_blank">transition</a> like:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: [[12, 33], [15, 36], [19, 39], ...],\n    },\n    transition: &#39;shape&#39;\n    // ...\n}\n</code></pre>\n<p>Although the points will be interpolated, the consequent animation will be like that each point runs straight to the target position, which might do not match the user requirement if some kind of track like spiral is actually needed. In this case, users can use the <code class="codespan">during</code> callback like that:</p>\n<pre><code class="lang-ts">{\n    type: &#39;polygon&#39;,\n    shape: {\n        points: calculatePoints(initialDegree),\n        transition: &#39;points&#39;\n    },\n    extra: {\n        degree: nextDegree\n    },\n    // Make echarts interpolate `extra.degree` internally, based on which\n    // we calculate the `points` in each animation frame.\n    transition: &#39;extra&#39;,\n    during: function (duringAPI) {\n        var currentDegree = duringAPI.getExtra(&#39;degree&#39;);\n        duringAPI.setShape(calculatePoints(currentDegree));\n    }\n    // ...\n}\n</code></pre>\n<p>See this example <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-spiral-race&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n',
    )
    extra: Optional[Extra12] = Field(
        None,
        description='<p>Users can define their own props in this <code class="codespan">extra</code> field. See <a href="option.html#series-custom.renderItem.return_rect.during" target="_blank">during</a> for the major usage of <code class="codespan">extra</code>.</p>\n',
    )
    shape: Optional[Shape18] = Field(None, description='')
    style: Optional[Style22] = Field(
        None,
        description='<p>More attributes in <code class="codespan">style</code> (for example, <a href="tutorial.html#Rich%20Text" target="_blank">rich text</a>), see the <code class="codespan">style</code> related attributes in <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable" target="_blank">zrender/graphic/Displayable</a>.</p>\n<p>Notice, the attribute names of the <code class="codespan">style</code> of graphic elements is derived from <code class="codespan">zrender</code>, which may be different from the attribute names in <code class="codespan">echarts label</code>, <code class="codespan">echarts itemStyle</code>, etc., although they have the same meaning. For example:</p>\n<ul>\n<li><a href="#series-scatter.label.color">itemStyle.color</a> =&gt; <code class="codespan">style.fill</code></li>\n<li><a href="#series-scatter.label.color">itemStyle.borderColor</a> =&gt; <code class="codespan">style.stroke</code></li>\n<li><a href="#series-scatter.label.color">label.color</a> =&gt; <code class="codespan">style.textFill</code></li>\n<li><a href="#series-scatter.label.textBorderColor">label.textBorderColor</a> =&gt; <code class="codespan">style.textStroke</code></li>\n<li>...</li>\n</ul>\n',
    )
    focus: Optional[str] = Field(
        'none',
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>When it&#39;s 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<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',
    )
    blurScope: Optional[str] = Field(
        'coordinateSystem',
        description='<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',
    )
    emphasisDisabled: Optional[bool] = Field(
        None, description='<p>Whether to disable the emphasis state.</p>\n'
    )
    emphasis: Optional[Emphasis182] = Field(
        None, description='<p>Emphasis state of the element.</p>\n'
    )
    blur: Optional[Blur152] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Blur state, available when <code class="codespan">focus</code> is set.</p>\n',
    )
    select: Optional[Select56] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Select state, available when <a href="#series-custom.selectedMode">selectedMode</a> is set.</p>\n',
    )


class RenderItem(BaseModel):
    """
        <p><code class="codespan">custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href="#series-custom.renderItem">renderItem</a>.</p>
    <p>For example:</p>
    <pre><code class="lang-ts">var option = {
        ...,
        series: [{
            type: &#39;custom&#39;,
            renderItem: function (params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;

                var rectShape = echarts.graphic.clipRectByRect({
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                }, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                });

                return rectShape &amp;&amp; {
                    type: &#39;rect&#39;,
                    shape: rectShape,
                    style: api.style()
                };
            },
            data: data
        }]
    }
    </code></pre>
    <p><a href="#series-custom.renderItem">renderItem</a> will be called on each data item.</p>
    <p><a href="#series-custom.renderItem">renderItem</a> provides two parameters:</p>
    <ul>
    <li><a href="#series-custom.renderItem.arguments.params">params</a>: provides info about the current series and data and coordinate system.</li>
    <li><a href="#series-custom.renderItem.arguments.api">api</a>: includes some methods.</li>
    </ul>
    <p><a href="#series-custom.renderItem">renderItem</a> method should returns graphic elements definitions.See <a href="#series-custom.renderItem.return">renderItem.return</a>.</p>
    <p>Generally, the main process of <a href="#series-custom.renderItem">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href="#series-custom.renderItem.arguments.api">renderItem.arguments.api</a> are always used in this procedure:</p>
    <ul>
    <li><a href="#series-custom.renderItem.arguments.api.value">api.value(...)</a> is used to retrieve value from data. For example, <code class="codespan">api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>
    <li><a href="#series-custom.renderItem.arguments.api.coord">api.coord(...)</a> is used to convert data to coordinate. For example, <code class="codespan">var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>
    </ul>
    <p>Sometimes <a href="#series-custom.renderItem.arguments.api.size">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>
    <p>Moreover, <a href="#series-custom.renderItem.arguments.api.style">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href="#series-custom.itemStyle">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code class="codespan">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code> to override those style settings.</p>

    """

    arguments: Optional[Arguments] = Field(
        None,
        description='<p>Parameters of <code class="codespan">renderItem</code>.</p>\n',
    )
    return_: Optional[Any] = Field(
        None,
        alias='return',
        description='<p><code class="codespan">renderItem</code> should returns graphic element definitions. Each graphic element is an object. See <a href="#graphic.elements">graphic</a> for detailed info. (But width\\height\\top\\bottom is not supported here)</p>\n<p>If nothing should be rendered in this data item, just returns nothing.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">// Returns a rectangular.\n{\n    type: &#39;rect&#39;,\n    shape: {\n        x: x, y: y, width: width, height: height\n    },\n    style: api.style()\n}\n</code></pre>\n<pre><code class="lang-ts">// Returns a group of elements.\n{\n    type: &#39;group&#39;,\n    // If diffChildrenByName is set as `true`, `child.name` will be used\n    // to diff children, which improves animation transition but degrade\n    // performance. The default value is `false`.\n    // diffChildrenByName: true,\n    children: [{\n        type: &#39;circle&#39;,\n        shape: {\n            cx: cx, cy: cy, r: r\n        },\n        style: api.style()\n    }, {\n        type: &#39;line&#39;,\n        shape: {\n            x1: x1, y1: y1, x2: x2, y2: y2\n        },\n        style: api.style()\n    }]\n}\n</code></pre>\n',
    )
    return_group: Optional[ReturnGroup] = Field(
        None,
        description='<p><code class="codespan">group</code> is the only type that can contain children, so that a group of elements can be positioned and transformed together.</p>\n',
    )
    return_path: Optional[ReturnPath] = Field(
        None,
        description='<p>Use <a href="http://www.w3.org/TR/SVG/paths.html#PathData" target="_blank">SVG PathData</a> to describe a path. Can be used to draw icons or any other shapes fitting the specified size by auto transforming.</p>\n<p>See examples:\n<a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-calendar-icon" target="_blank">icons</a> and <a href="http://localhost/echarts-website/examples/en/editor.html?c=custom-gantt-flight" target="_blank">shapes</a>.</p>\n<p>About width/height, cover/contain, see\n<a href="#series-custom.renderItem.return_path.shape.layout">layout</a>.</p>\n',
    )
    return_image: Optional[ReturnImage] = Field(None, description='')
    return_text: Optional[ReturnText] = Field(None, description='<p>Text block.</p>\n')
    return_rect: Optional[ReturnRect] = Field(
        None, description='<p>Rectangle element.</p>\n'
    )
    return_circle: Optional[ReturnCircle] = Field(
        None, description='<p>Circle element.</p>\n'
    )
    return_ring: Optional[ReturnRing] = Field(
        None, description='<p>Ring element.</p>\n'
    )
    return_sector: Optional[ReturnSector] = Field(
        None, description='<p>Sector element.</p>\n'
    )
    return_arc: Optional[ReturnArc] = Field(None, description='<p>Arc element.</p>\n')
    return_polygon: Optional[ReturnPolygon] = Field(
        None, description='<p>Polygon element.</p>\n'
    )
    return_polyline: Optional[ReturnPolyline] = Field(
        None, description='<p>Polyline element.</p>\n'
    )
    return_line: Optional[ReturnLine] = Field(
        None, description='<p>Line element.</p>\n'
    )
    return_bezierCurve: Optional[ReturnBezierCurve] = Field(
        None, description='<p>Quadratic bezier curve or cubic bezier curve.</p>\n'
    )


class Decal28(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle374(BaseModel):
    """
    <p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>

    """

    color: Optional[Any] = Field(
        None,
        description='\n\n<p> color. Color is taken from <a href="#color">option.color Palette</a> by default. </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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal28] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class LineStyle317(LineStyle51):
    pass


class LabelLine83(BaseModel):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Configuration of label guide line.</p>

    """

    show: Optional[bool] = Field(
        None, description='\n\n<p>Whether to show the label guide line.</p>\n'
    )
    showAbove: Optional[bool] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Whether to show the label guide line above the corresponding element.</p>\n',
    )
    length2: Optional[float] = Field(
        None, description='\n\n<p>The length of the second segment of guide line.</p>\n'
    )
    smooth: Optional[Union[bool, float]] = Field(
        False,
        description='\n\n<p>Whether to smooth the guide line. It defaults to be <code class="codespan">false</code> and can be set as <code class="codespan">true</code> or the values from 0 to 1 which indicating the smoothness.</p>\n',
    )
    minTurnAngle: Optional[float] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Minimum turn angle between two segments of guide line to prevent unaesthetic display when angle is too small.</p>\n<p>Can be 0 - 180 degree.</p>\n',
    )
    lineStyle: Optional[LineStyle317] = Field(None, description='')


class LabelLayout17(LabelLayout):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.0.0</code></p>
    </blockquote>
    <p>Unified layout configuration of labels.</p>
    <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>
    <p>This option can be a callback with following parameters.</p>
    <pre><code class="lang-ts">// corresponding index of data
    dataIndex: number
    // corresponding type of data. Only available in graph, in which it can be &#39;node&#39; or &#39;edge&#39;
    dataType?: string
    // corresponding index of series
    seriesIndex: number
    // Displayed text of label.
    text: string
    // Bounding rectangle of label.
    labelRect: {x: number, y: number, width: number, height: number}
    // Horizontal alignment of label.
    align: &#39;left&#39; | &#39;center&#39; | &#39;right&#39;
    // Vertical alignment of label.
    verticalAlign: &#39;top&#39; | &#39;middle&#39; | &#39;bottom&#39;
    // Bounding rectangle of the element corresponding to.
    rect: {x: number, y: number, width: number, height: number}
    // Default points array of labelLine. Currently only provided in pie and funnel series.
    // It&#39;s null in other series.
    labelLinePoints?: number[][]
    </code></pre>
    <p><strong>Example:</strong></p>
    <p>Align the labels on the right. Left 10px margin to the edge.</p>
    <pre><code class="lang-ts">labelLayout(params) {
        return {
            x: params.rect.x + 10,
            y: params.rect.y + params.rect.height / 2,
            verticalAlign: &#39;middle&#39;,
            align: &#39;left&#39;
        }
    }
    </code></pre>
    <p>Set the text size based on the size of element bounding rectangle.</p>
    <pre><code class="lang-ts">
    labelLayout(params) {
        return {
            fontSize: Math.max(params.rect.width / 10, 5)
        };
    }
    </code></pre>

    """

    pass


class Decal29(Decal):
    """
        <p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>
    <p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>

    """

    pass


class ItemStyle375(BaseModel):
    color: Optional[Any] = Field(
        None,
        description='\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',
    )
    borderColor: Optional[Any] = Field(
        '#000',
        description='\n\n<p> border color, whose format is similar to that of <code class="codespan">color</code>.</p>\n',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    borderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    borderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    borderCap: Optional[str] = Field(
        'butt',
        description='<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',
    )
    borderJoin: Optional[str] = Field(
        'bevel',
        description='<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',
    )
    borderMiterLimit: Optional[float] = Field(
        10,
        description='<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',
    )
    shadowBlur: Optional[float] = Field(
        None,
        description='\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',
    )
    shadowColor: Optional[Any] = Field(
        None,
        description='\n\n<p>Shadow color. Support same format as <code class="codespan">color</code>.</p>\n',
    )
    shadowOffsetX: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the horizontal direction of shadow.</p>\n',
    )
    shadowOffsetY: Optional[float] = Field(
        0,
        description='\n\n<p>Offset distance on the vertical direction of shadow.</p>\n',
    )
    opacity: Optional[float] = Field(
        None,
        description='\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',
    )
    decal: Optional[Decal29] = Field(
        None,
        description='<p>The style of the decal pattern. It works only if <a href="#aria.enabled">aria.enabled</a> and <a href="#aria.decal.show">aria.decal.show</a> are both set to be <code class="codespan">true</code>.</p>\n<p>If it is set to be <code class="codespan">&#39;none&#39;</code>, no decal will be used.</p>\n',
    )


class ItemStyle376(HandleStyle1):
    pass


class Emphasis183(BaseModel):
    itemStyle: Optional[ItemStyle376] = Field(None, description='')


class TextStyle52(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip38(BaseModel):
    """
    <p>tooltip settings in this series data.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle52] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Datum42(BaseModel):
    name: Optional[str] = Field(None, description='<p>Name of data item.</p>\n')
    value: Optional[float] = Field(None, description='<p>Value of data item.</p>\n')
    groupId: Optional[str] = Field(
        None,
        description='<p>The groupID of this data item. groupID will be used to classify the data.</p>\n',
    )
    itemStyle: Optional[ItemStyle375] = Field(None, description='')
    emphasis: Optional[Emphasis183] = Field(None, description='')
    tooltip: Optional[Tooltip38] = Field(
        None, description='<p>tooltip settings in this series data.</p>\n'
    )


class UniversalTransition12(UniversalTransition):
    """
        <blockquote>
    <p>Since <code class="codespan">v5.2.0</code></p>
    </blockquote>
    <p>Configuration related to universal transition animation.</p>
    <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>
    <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>
    <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>

    """

    pass


class TextStyle53(TextStyle2):
    """
        <blockquote>
    <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>
    </blockquote>
    <p>The text syle of tooltip&#39;s floating layer.</p>

    """

    pass


class Tooltip39(BaseModel):
    """
    <p>tooltip settings in this series.</p>

    """

    position: Optional[Union[str, Any]] = Field(
        None,
        description='<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',
    )
    formatter: Optional[Union[str, Any]] = Field(
        None,
        description='<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 pie chart\n    percent: number\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',
    )
    valueFormatter: Optional[str] = Field(
        None,
        description='<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',
    )
    backgroundColor: Optional[Any] = Field(
        'rgba(50,50,50,0.7)',
        description='<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',
    )
    borderColor: Optional[Any] = Field(
        '#333',
        description='\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',
    )
    borderWidth: Optional[float] = Field(
        0,
        description='\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',
    )
    padding: Optional[float] = Field(
        5,
        description='\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',
    )
    textStyle: Optional[TextStyle53] = Field(
        None,
        description='<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',
    )
    extraCssText: Optional[str] = Field(
        None,
        description='\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',
    )


class Series22(BaseModel):
    """
        <p><strong>custom series</strong></p>
    <p><code class="codespan">custom series</code> supports customizing graphic elements, and then generate more types of charts.</p>
    <p>echarts manages the creation, deletion, animation and interaction with other components (like <a href="#dataZoom">dataZoom</a>、<a href="#visualMap">visualMap</a>), which frees developers from handling those issue themselves.</p>
    <p><strong>For example, a &quot;x-range&quot; chart is made by custom sereis:</strong></p>
    <iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=custom-profile&reset=1&edit=1" width="800" height="400"></iframe>


    <p><strong><a href="http://localhost/echarts-website/examples/en/index.html#chart-type-custom" target="_blank">More samples of custom series</a></strong></p>
    <p><strong><a href="tutorial.html#Custom%20Series" target="_blank">A tutotial of custom series</a></strong></p>
    <p><br>
    <strong>Customize the render logic (in renderItem method)</strong></p>
    <p><code class="codespan">custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href="#series-custom.renderItem">renderItem</a>.</p>
    <p>For example:</p>
    <pre><code class="lang-ts">var option = {
        ...,
        series: [{
            type: &#39;custom&#39;,
            renderItem: function (params, api) {
                var categoryIndex = api.value(0);
                var start = api.coord([api.value(1), categoryIndex]);
                var end = api.coord([api.value(2), categoryIndex]);
                var height = api.size([0, 1])[1] * 0.6;

                var rectShape = echarts.graphic.clipRectByRect({
                    x: start[0],
                    y: start[1] - height / 2,
                    width: end[0] - start[0],
                    height: height
                }, {
                    x: params.coordSys.x,
                    y: params.coordSys.y,
                    width: params.coordSys.width,
                    height: params.coordSys.height
                });

                return rectShape &amp;&amp; {
                    type: &#39;rect&#39;,
                    shape: rectShape,
                    style: api.style()
                };
            },
            data: data
        }]
    }
    </code></pre>
    <p><a href="#series-custom.renderItem">renderItem</a> will be called on each data item.</p>
    <p><a href="#series-custom.renderItem">renderItem</a> provides two parameters:</p>
    <ul>
    <li><a href="#series-custom.renderItem.arguments.params">params</a>: provides info about the current series and data and coordinate system.</li>
    <li><a href="#series-custom.renderItem.arguments.api">api</a>: includes some methods.</li>
    </ul>
    <p><a href="#series-custom.renderItem">renderItem</a> method should returns graphic elements definitions.See <a href="#series-custom.renderItem.return">renderItem.return</a>.</p>
    <p>Generally, the main process of <a href="#series-custom.renderItem">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href="#series-custom.renderItem.arguments.api">renderItem.arguments.api</a> are always used in this procedure:</p>
    <ul>
    <li><a href="#series-custom.renderItem.arguments.api.value">api.value(...)</a> is used to retrieve value from data. For example, <code class="codespan">api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>
    <li><a href="#series-custom.renderItem.arguments.api.coord">api.coord(...)</a> is used to convert data to coordinate. For example, <code class="codespan">var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>
    </ul>
    <p>Sometimes <a href="#series-custom.renderItem.arguments.api.size">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>
    <p>Moreover, <a href="#series-custom.renderItem.arguments.api.style">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href="#series-custom.itemStyle">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code class="codespan">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code> to override those style settings.</p>
    <p><br>
    <strong>Dimension mapping (by encode and dimension option)</strong></p>
    <p>In most cases, <a href="#series-custom.encode">series.encode</a> needs to be specified when using <code class="codespan">custom series</code> series, which indicate the mapping of dimensions, and then echarts can render appropriate axis by the extent of those data.</p>
    <p><code class="codespan">encode.tooltip</code> and <code class="codespan">encode.label</code> can also be specified to define the content of default <code class="codespan">tooltip</code> and <code class="codespan">label</code>.
    <a href="#series-custom.dimensions">series.dimensions</a> can also be specified to defined names of each dimensions, which will be displayed in tooltip.</p>
    <p>For example:</p>
    <pre><code class="lang-ts">series: {
        type: &#39;custom&#39;,
        renderItem: function () {
            ...
        },
        encode: {
            x: [2, 4, 3],
            y: 1,
            label: 0,
            tooltip: [2, 4, 3]
        }
    }
    </code></pre>
    <p><br>
    <strong>Controlled by dataZoom</strong></p>
    <p>When use <code class="codespan">custom series</code> with <a href="#dataZoom">dataZoom</a>, <a href="#dataZoom.filterMode">dataZoom.filterMode</a> usually be set as <code class="codespan">&#39;weakFilter&#39;</code>, which prevent <code class="codespan">dataItem</code> from being filtered when only part of its dimensions are out of the current data window.</p>
    <p><br>
    <br>
    <strong>Difference between <code class="codespan">dataIndex</code> and <code class="codespan">dataIndexInside</code></strong></p>
    <ul>
    <li><code class="codespan">dataIndex</code> is the index of a <code class="codespan">dataItem</code> in the original data.</li>
    <li><code class="codespan">dataIndexInside</code> is the index of a <code class="codespan">dataItem</code> in the current data window (see <a href="#dataZoom">dataZoom</a>.</li>
    </ul>
    <p><a href="#series-custom.renderItem.arguments.api">renderItem.arguments.api</a> uses <code class="codespan">dataIndexInside</code> as the input parameter but not <code class="codespan">dataIndex</code>, because conversion from <code class="codespan">dataIndex</code> to <code class="codespan">dataIndexInside</code> is time-consuming.</p>
    <p><br>
    <strong>Event listener</strong></p>
    <pre><code class="lang-ts">chart.setOption({
        // ...
        series: {
            type: &#39;custom&#39;,
            renderItem: function () {
                // ...
                return {
                    type: &#39;group&#39;,
                    children: [{
                        type: &#39;circle&#39;
                        // ...
                    }, {
                        type: &#39;circle&#39;,
                        name: &#39;aaa&#39;,
                        // User specified info, available
                        // in event handler.
                        info: 12345,
                        // ...
                    }]
                };
            }
        }
    });
    chart.on(&#39;click&#39;, {element: &#39;aaa&#39;}, function (params) {
        // When the element with name &#39;aaa&#39; clicked,
        // this method called.
        console.log(params.info);
    });
    </code></pre>

    """

    type: Optional[str] = Field('custom', description='')
    id: Optional[str] = Field(
        None,
        description='<p>Component ID, not specified by default. If specified, it can be used to refer the component in option or API.</p>\n',
    )
    name: Optional[str] = Field(
        None,
        description='<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: Optional[str] = Field(
        'series',
        description='\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',
    )
    legendHoverLink: Optional[bool] = Field(
        True,
        description='\n\n<p>Whether to enable highlighting chart when <a href="#legend">legend</a> is being hovered.</p>\n',
    )
    coordinateSystem: Optional[str] = Field(
        'cartesian2d',
        description='<p>The coordinate used in the series, whose options are:</p>\n<ul>\n<li><p><code class="codespan">null</code> or <code class="codespan">&#39;none&#39;</code></p>\n<p>  No coordinate.</p>\n</li>\n</ul>\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-custom.xAxisIndex">xAxisIndex</a> and <a href="#series-custom.yAxisIndex">yAxisIndex</a> to assign the corresponding axis component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;polar&#39;</code></p>\n<p>  Use polar coordinates, with <a href="#series-custom.polarIndex">polarIndex</a> to assign the corresponding polar coordinate component.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;geo&#39;</code></p>\n<p>  Use geographic coordinate, with <a href="#series-custom.geoIndex">geoIndex</a> to assign the corresponding geographic coordinate components.</p>\n</li>\n</ul>\n<ul>\n<li><p><code class="codespan">&#39;none&#39;</code></p>\n<p>  Do not use coordinate system.</p>\n</li>\n</ul>\n',
    )
    xAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#xAxis">x axis</a> to combine with, which is  useful for multiple x axes in one chart.</p>\n',
    )
    yAxisIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#yAxis">y axis</a> to combine with, which is  useful for multiple y axes in one chart.</p>\n',
    )
    polarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#polar">polar coordinate</a> to combine with, which is useful for multiple polar axes in one chart.</p>\n',
    )
    geoIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#geo">geographic coordinate</a> to combine with, which is useful for multiple geographic axes in one chart.</p>\n',
    )
    calendarIndex: Optional[float] = Field(
        0,
        description='<p>Index of <a href="#calendar">calendar coordinates</a> to combine with, which is useful for multiple calendar coordinates in one chart.</p>\n',
    )
    renderItem: Optional[JSCode] = Field(
        None,
        description='<p><code class="codespan">custom series</code> requires developers to write a render logic by themselves. This render logic is called <a href="#series-custom.renderItem">renderItem</a>.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">var option = {\n    ...,\n    series: [{\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            var categoryIndex = api.value(0);\n            var start = api.coord([api.value(1), categoryIndex]);\n            var end = api.coord([api.value(2), categoryIndex]);\n            var height = api.size([0, 1])[1] * 0.6;\n\n            var rectShape = echarts.graphic.clipRectByRect({\n                x: start[0],\n                y: start[1] - height / 2,\n                width: end[0] - start[0],\n                height: height\n            }, {\n                x: params.coordSys.x,\n                y: params.coordSys.y,\n                width: params.coordSys.width,\n                height: params.coordSys.height\n            });\n\n            return rectShape &amp;&amp; {\n                type: &#39;rect&#39;,\n                shape: rectShape,\n                style: api.style()\n            };\n        },\n        data: data\n    }]\n}\n</code></pre>\n<p><a href="#series-custom.renderItem">renderItem</a> will be called on each data item.</p>\n<p><a href="#series-custom.renderItem">renderItem</a> provides two parameters:</p>\n<ul>\n<li><a href="#series-custom.renderItem.arguments.params">params</a>: provides info about the current series and data and coordinate system.</li>\n<li><a href="#series-custom.renderItem.arguments.api">api</a>: includes some methods.</li>\n</ul>\n<p><a href="#series-custom.renderItem">renderItem</a> method should returns graphic elements definitions.See <a href="#series-custom.renderItem.return">renderItem.return</a>.</p>\n<p>Generally, the main process of <a href="#series-custom.renderItem">renderItem</a> is that retrieve value from data and convert them to graphic elements on the current coordinate system. Two methods in <a href="#series-custom.renderItem.arguments.api">renderItem.arguments.api</a> are always used in this procedure:</p>\n<ul>\n<li><a href="#series-custom.renderItem.arguments.api.value">api.value(...)</a> is used to retrieve value from data. For example, <code class="codespan">api.value(0)</code> retrieve the value of the first dimension in the current data item.</li>\n<li><a href="#series-custom.renderItem.arguments.api.coord">api.coord(...)</a> is used to convert data to coordinate. For example, <code class="codespan">var point = api.coord([api.value(0), api.value(1)])</code> converet the data to the point on the current coordinate system.</li>\n</ul>\n<p>Sometimes <a href="#series-custom.renderItem.arguments.api.size">api.size(...)</a> method is needed, which calculates the size on the coordinate system by a given data range.</p>\n<p>Moreover, <a href="#series-custom.renderItem.arguments.api.style">api.style(...)</a> method can be used to set style. It provides not only the style settings specified in <a href="#series-custom.itemStyle">series.itemStyle</a>, but also the result of visual mapping. This method can also be called like <code class="codespan">api.style({fill: &#39;green&#39;, stroke: &#39;yellow&#39;})</code> to override those style settings.</p>\n',
    )
    itemStyle: Optional[ItemStyle374] = Field(
        None,
        description='<p>Graphic style of , <code class="codespan">emphasis</code> is the style when it is highlighted, like being hovered by mouse, or highlighted via legend connect.</p>\n',
    )
    labelLine: Optional[LabelLine83] = Field(
        None,
        description='<blockquote>\n<p>Since <code class="codespan">v5.0.0</code></p>\n</blockquote>\n<p>Configuration of label guide line.</p>\n',
    )
    labelLayout: Optional[LabelLayout17] = Field(
        None,
        description='<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',
    )
    selectedMode: Optional[Union[bool, str]] = Field(
        False,
        description='<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',
    )
    dimensions: Optional[Any] = Field(
        None,
        description='<p><code class="codespan">dimensions</code> can be used to define dimension info for <code class="codespan">series.data</code> or <code class="codespan">dataset.source</code>.</p>\n<p>Notice: if <a href="#dataset">dataset</a> is used, we can definite dimensions in <a href="#dataset.dimensions">dataset.dimensions</a>, or provide dimension names in the first column/row of <a href="#dataset.source">dataset.source</a>, and not need to specify <code class="codespan">dimensions</code> here. But if <code class="codespan">dimensions</code> is specified here, it will be used despite the dimension definitions in dataset.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // &#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        // Specify name for each dimesions, which will be displayed in tooltip.\n        dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [\n        null,                // If you do not intent to defined this dimension, use null is fine.\n        {type: &#39;ordinal&#39;},   // Specify type of this dimension.\n                             // &#39;ordinal&#39; is always used in string.\n                             // If type is not specified, echarts will guess type by data.\n        {name: &#39;good&#39;, type: &#39;number&#39;},\n        &#39;bad&#39;                // Equals to {name: &#39;bad&#39;}.\n    ]\n}\n</code></pre>\n<p>Each data item of <code class="codespan">dimensions</code> can be:</p>\n<ul>\n<li><code class="codespan">string</code>, for example, <code class="codespan">&#39;someName&#39;</code>, which equals to <code class="codespan">{name: &#39;someName&#39;}</code>.</li>\n<li><code class="codespan">Object</code>, where the attributes can be:<ul>\n<li>name: <code class="codespan">string</code>.</li>\n<li>type: <code class="codespan">string</code>, supports:<ul>\n<li><code class="codespan">number</code></li>\n<li><code class="codespan">float</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array" target="_blank">Float64Array</a></li>\n<li><code class="codespan">int</code>, that is, <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array" target="_blank">Int32Array</a></li>\n<li><code class="codespan">ordinal</code>, discrete value, which represents string generally.</li>\n<li><code class="codespan">time</code>, time value, see <a href="#series.data">data</a> to check the format of time value.</li>\n</ul>\n</li>\n<li>displayName: <code class="codespan">string</code>, generally used in tooltip for dimension display. If not specified, use <code class="codespan">name</code> by default.</li>\n</ul>\n</li>\n</ul>\n<p>When <code class="codespan">dimensions</code> is specified, the default <code class="codespan">tooltip</code> will be displayed vertically, which is better to show diemsion names. Otherwise, <code class="codespan">tooltip</code> will displayed only value horizontally.</p>\n',
    )
    encode: Optional[Any] = Field(
        None,
        description='<p>Define what is encoded to for each dimension of <code class="codespan">data</code>. For example:</p>\n<pre><code class="lang-ts">option = {\n    dataset: {\n        source: [\n            // Each column is called a dimension.\n            // There are five dimensions: 0, 1, 2, 3, 4.\n            [12, 44, 55, 66, 2],\n            [23, 6, 16, 23, 1],\n            ...\n        ]\n    },\n    series: {\n        type: &#39;xxx&#39;,\n        encode: {\n            x: [3, 1, 5],      // Dimension 3, 1, 5 is mapped to x axis.\n            y: 2,              // Dimension 2 is mapped to y axis.\n            tooltip: [3, 2, 4] // Dimension 3, 2, 4 will be displayed in tooltip.\n        }\n    }\n}\n</code></pre>\n<p>When <a href="#series.dimensions">dimensions</a> is used to defined name for a certain dimension, <code class="codespan">encode</code> can refer the name directly. For example:</p>\n<pre><code class="lang-ts">series: {\n    type: &#39;xxx&#39;,\n    dimensions: [&#39;date&#39;, &#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;],\n    encode: {\n        x: &#39;date&#39;,\n        y: [&#39;open&#39;, &#39;close&#39;, &#39;highest&#39;, &#39;lowest&#39;]\n    }\n}\n</code></pre>\n<p>The basic structure of <a href="option.html#series.encode" target="_blank">encode</a> is illustrated as follows, where the left part of colon is the name of axis like <code class="codespan">&#39;x&#39;</code>, <code class="codespan">&#39;y&#39;</code>, <code class="codespan">&#39;radius&#39;</code>, <code class="codespan">&#39;angle&#39;</code> or some special reserved names like &quot;tooltip&quot;, &quot;itemName&quot; etc., and the right part of the colon is the dimension names or dimension indices (based on 0). One or more dimensions can be specified. Usually not all of mappings need to be specified, only specify needed ones.</p>\n<p>The properties available in <code class="codespan">encode</code> listed as follows:</p>\n<pre><code class="lang-ts">// In any of the series and coordinate systems,\n// these properties are available:\nencode: {\n    // Display dimension &quot;product&quot; and &quot;score&quot; in the tooltip.\n    tooltip: [&#39;product&#39;, &#39;score&#39;]\n    // Set the series name as the concat of the names of dimensions[1] and dimensions[3].\n    // (sometimes the dimension names are too long to type in series.name manually).\n    seriesName: [1, 3],\n    // Using dimensions[2] as the id of each data item. This is useful when dynamically\n    // update data by `chart.setOption()`, where the new and old data item can be\n    // corresponded by id, by which the appropriate animation can be performed when updating.\n    itemId: 2,\n    // Using dimensions[3] as the name of each data item. This is useful in charts like\n    // &#39;pie&#39;, &#39;funnel&#39;, where data item name can be displayed in legend.\n    itemName: 3,\n    // Using dimensions[4] as the groupId of each data item. groupId will be used to categorize the data. And to determine\n    // How the merge and split animation are performed in the universal transition. See universalTransition option for detail.\n    itemGroupId: 4\n}\n\n// These properties only work in cartesian(grid) coordinate system:\nencode: {\n    // Map dimensions[1], dimensions[5] and dimension &quot;score&quot; to the X axis.\n    x: [1, 5, &#39;score&#39;],\n    // Map dimensions[0] to the Y axis.\n    y: 0\n}\n\n// These properties only work in polar coordinate system:\nencode: {\n    radius: 3,\n    angle: 2,\n    ...\n}\n\n// These properties only work in geo coordinate system:\nencode: {\n    lng: 3,\n    lat: 2\n}\n\n// For some type of series that are not in any coordinate system,\n// like &#39;pie&#39;, &#39;funnel&#39; etc.:\nencode: {\n    value: 3\n}\n</code></pre>\n<p>This is an <a href="http://localhost/echarts-website/examples/en/view.html?c=dataset-encode1&amp;edit=1&amp;reset=1" target="_blank">example</a> for <code class="codespan">encode</code>.</p>\n<p>Specially, in [custom series(~series-custom), some property in <code class="codespan">encode</code>, corresponding to axis, can be set as null to make the series not controlled by the axis, that is, the series data will not be count in the extent of the axis, and the <a href="#dataZoom">dataZoom</a> on the axis will not filter the series.</p>\n<pre><code class="lang-ts">var option = {\n    xAxis: {},\n    yAxis: {},\n    dataZoom: [{\n        xAxisIndex: 0\n    }, {\n        yAxisIndex: 0\n    }],\n    series: {\n        type: &#39;custom&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;circle&#39;,\n                shape: {\n                    cx: 100, // x position is always 100\n                    cy: api.coord([0, api.value(0)])[1],\n                    r: 30\n                },\n                style: {\n                    fill: &#39;blue&#39;\n                }\n            };\n        },\n        encode: {\n            // Then the series will not be controlled\n            // by x axis and corresponding dataZoom.\n            x: -1,\n            y: 1\n        },\n        data: [ ... ]\n    }\n};\n</code></pre>\n',
    )
    seriesLayoutBy: Optional[str] = Field(
        'column',
        description='<p>When <a href="#dataset">dataset</a> is used, <code class="codespan">seriesLayoutBy</code> specifies whether the column or the row of <code class="codespan">dataset</code> is mapped to the series, namely, the series is &quot;layout&quot; on columns or rows. Optional values:</p>\n<ul>\n<li>&#39;column&#39;: by default, the columns of <code class="codespan">dataset</code> are mapped the series. In this case, each column represents a dimension.</li>\n<li>&#39;row&#39;：the rows of <code class="codespan">dataset</code> are mapped to the series. In this case, each row represents a dimension.</li>\n</ul>\n<p>Check this <a href="http://localhost/echarts-website/examples/en/editor.html?c=dataset-series-layout-by" target="_blank">example</a>.</p>\n',
    )
    datasetIndex: Optional[float] = Field(
        0,
        description='<p>If <a href="#series.data">series.data</a> is not specified, and <a href="#dataset">dataset</a> exists, the series will use <code class="codespan">dataset</code>. <code class="codespan">datasetIndex</code> specifies which dataset will be used.</p>\n',
    )
    dataGroupId: Optional[str] = Field(
        None,
        description='<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: Optional[List[Datum42]] = Field(
        None,
        description='<p>Data array of series, which can be in the following forms:</p>\n<p>Notice, if no <code class="codespan">data</code> specified in series, and there is <a href="#dataset">dataset</a> in option, series will use the first <a href="#dataset">dataset</a> as its datasource. If <code class="codespan">data</code> has been specified, <a href="#dataset">dataset</a> will not used.</p>\n<p><code class="codespan">series.datasetIndex</code> can be used to specify other <a href="#dataset">dataset</a>.</p>\n<p>Basically, data is represented by a two-dimension array, like the example below, where each column is named as a &quot;dimension&quot;.</p>\n<pre><code class="lang-ts">series: [{\n    data: [\n        // dimX   dimY   other dimensions ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n</code></pre>\n<ul>\n<li>In <a href="#grid">cartesian (grid)</a>, &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#xAxis">xAxis</a> and <a href="#yAxis">yAxis</a> respectively.</li>\n<li>In <a href="#polar">polar</a> &quot;dimX&quot; and &quot;dimY&quot; correspond to <a href="#radiusAxis">radiusAxis</a> and <a href="#angleAxis">angleAxis</a> respectively.</li>\n<li>Other dimensions are optional, which can be used in other places. For example:<ul>\n<li><a href="#visualMap">visualMap</a> can map one or more dimensions to visual (color, symbol size ...).</li>\n<li><a href="#series.symbolSize">series.symbolSize</a> can be set as a callback function, where symbol size can be calculated by values of a certain dimension.</li>\n<li>Values in other dimensions can be shown by <a href="#tooltip.formatter">tooltip.formatter</a> or <a href="#series.label.formatter">series.label.formatter</a>.</li>\n</ul>\n</li>\n</ul>\n<p>Especially, when there is one and only one category axis (axis.type is <code class="codespan">&#39;category&#39;</code>), data can be simply be represented by a one-dimension array, like:</p>\n<pre><code class="lang-ts">xAxis: {\n    data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;]\n},\nseries: [{\n    // Each item corresponds to each item in xAxis.data.\n    data: [23,  44,  55,  19]\n    // In fact, it is the simplification of the format below:\n    // data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n</code></pre>\n<p><br>\n<strong>Relationship between &quot;value&quot; and <a href="#xAxis.type">axis.type</a></strong></p>\n<ul>\n<li><p>When a dimension corresponds to a value axis (axis.type is <code class="codespan">&#39;value&#39;</code> or <code class="codespan">&#39;log&#39;</code>):</p>\n<p>  The value can be a <code class="codespan">number</code> (like <code class="codespan">12</code>) (can also be a number in a <code class="codespan">string</code> format, like <code class="codespan">&#39;12&#39;</code>).</p>\n</li>\n<li><p>When a dimension corresponds to a category axis (axis.type is <code class="codespan">&#39;category&#39;</code>):</p>\n<p>  The value should be the ordinal of the axis.data (based on <code class="codespan">0</code>), the string value of the axis.data. For example:</p>\n<pre><code class="lang-ts">  xAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;Monday&#39;, &#39;Tuesday&#39;, &#39;Wednesday&#39;, &#39;Thursday&#39;]\n  },\n  yAxis: {\n      type: &#39;category&#39;,\n      data: [&#39;a&#39;, &#39;b&#39;, &#39;m&#39;, &#39;n&#39;, &#39;p&#39;, &#39;q&#39;]\n  },\n  series: [{\n      data: [\n          // xAxis      yAxis\n          [  0,           0,    2  ], // This point is located at xAxis: &#39;Monday&#39;, yAxis: &#39;a&#39;.\n          [  &#39;Thursday&#39;,  2,    1  ], // This point is located at xAxis: &#39;Thursday&#39;, yAxis: &#39;m&#39;.\n          [  2,          &#39;p&#39;,   2  ], // This point is located at xAxis: &#39;Wednesday&#39;, yAxis: &#39;p&#39;.\n          [  3,           3,    5  ]\n      ]\n  }]\n</code></pre>\n<p>  There is an example of double category axes: <a href="http://localhost/echarts-website/examples/en/editor.html?c=scatter-punchCard" target="_blank">Github Punchcard</a>.</p>\n</li>\n<li><p>When a dimension corresponds to a time axis (type is <code class="codespan">&#39;time&#39;</code>), the value can be:</p>\n<ul>\n<li>a timestamp, like <code class="codespan">1484141700832</code>, which represents a UTC time.</li>\n<li>a date string, in one of the formats below:<ul>\n<li>a subset of <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-15.9.1.15" target="_blank">ISO 8601</a>, only including (all of these are treated as local time unless timezone is specified, which is consistent with <a href="https://momentjs.com/" target="_blank">moment</a>):<ul>\n<li>only part of year/month/date/time are specified: <code class="codespan">&#39;2012-03&#39;</code>, <code class="codespan">&#39;2012-03-01&#39;</code>, <code class="codespan">&#39;2012-03-01 05&#39;</code>, <code class="codespan">&#39;2012-03-01 05:06&#39;</code>.</li>\n<li>separated by <code class="codespan">&quot;T&quot;</code> or a space: <code class="codespan">&#39;2012-03-01T12:22:33.123&#39;</code>, <code class="codespan">&#39;2012-03-01 12:22:33.123&#39;</code>.</li>\n<li>timezone specified: <code class="codespan">&#39;2012-03-01T12:22:33Z&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33+8000&#39;</code>, <code class="codespan">&#39;2012-03-01T12:22:33-05:00&#39;</code>.</li>\n</ul>\n</li>\n<li>other date string format (all of these are treated as local time):\n<code class="codespan">&#39;2012&#39;</code>, <code class="codespan">&#39;2012-3-1&#39;</code>, <code class="codespan">&#39;2012/3/1&#39;</code>, <code class="codespan">&#39;2012/03/01&#39;</code>,\n<code class="codespan">&#39;2009/6/12 2:00&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08&#39;</code>, <code class="codespan">&#39;2009/6/12 2:05:08.123&#39;</code>.</li>\n</ul>\n</li>\n<li>a JavaScript Date instance created by user:<ul>\n<li>Caution, when using a data string to create a Date instance, <a href="https://dygraphs.com/date-formats.html" target="_blank">browser differences and inconsistencies</a> should be considered.</li>\n<li>For example: In chrome, <code class="codespan">new Date(&#39;2012-01-01&#39;)</code> is treated as a Jan 1st 2012 in UTC, while <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> and <code class="codespan">new Date(&#39;2012/01/01&#39;)</code> are treated as Jan 1st 2012 in local timezone. In safari <code class="codespan">new Date(&#39;2012-1-1&#39;)</code> is not supported.</li>\n<li>So if you intent to perform <code class="codespan">new Date(dateString)</code>, it is strongly recommended to use a time parse library (e.g., <a href="https://momentjs.com/" target="_blank">moment</a>), or use <code class="codespan">echarts.number.parseDate</code>, or check <a href="https://dygraphs.com/date-formats.html" target="_blank">this</a>.</li>\n</ul>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<strong>Customize a data item:</strong></p>\n<p>When needing to customize a data item, it can be set as an object, where property <code class="codespan">value</code> reprensent real value. For example:</p>\n<pre><code class="lang-ts">[\n    12,\n    24,\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    33\n]\n// Or\n[\n    [12, 332],\n    [24, 32],\n    {\n        value: [24, 32],\n        // label style, only works in this data item.\n        label: {},\n        // item style, only works in this data item.\n        itemStyle:{}\n    },\n    [33, 31]\n]\n</code></pre>\n<p><br>\n<strong>Empty value:</strong></p>\n<p><code class="codespan">&#39;-&#39;</code> or <code class="codespan">null</code> or <code class="codespan">undefined</code> or <code class="codespan">NaN</code> can be used to describe that a data item does not exist (ps：<em>not exist</em> does not means its value is <code class="codespan">0</code>).</p>\n<p>For example, line chart can break when encounter an empty value, and scatter chart do not display graphic elements for empty values.</p>\n<p><br><br></p>\n',
    )
    clip: Optional[bool] = Field(
        False,
        description='\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',
    )
    zlevel: Optional[float] = Field(
        0,
        description='<p><code class="codespan">zlevel</code> value of all graphical elements in custom series.</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: Optional[float] = Field(
        2,
        description='<p><code class="codespan">z</code> value of all graphical elements in custom series, 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: Optional[bool] = Field(
        False,
        description='\n\n<p>Whether to ignore mouse events. Default value is false, for triggering and responding to mouse events.</p>\n',
    )
    animation: Optional[bool] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[float] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Union[float, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[str] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Union[float, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Union[float, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[str] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Union[float, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    universalTransition: Optional[UniversalTransition12] = Field(
        None,
        description='<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',
    )
    tooltip: Optional[Tooltip39] = Field(
        None, description='<p>tooltip settings in this series.</p>\n'
    )


class Series23(DataZoom):
    pass


class TextStyle54(BaseModel):
    """
    <p>Global font style.</p>

    """

    color: Optional[Any] = Field('#fff', description='\n\n<p> text color.</p>\n')
    fontStyle: Optional[str] = Field(
        'normal',
        description='\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',
    )
    fontWeight: Optional[Union[str, float]] = Field(
        'normal',
        description='\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',
    )
    fontFamily: Optional[str] = Field(
        'sans-serif',
        description='\n\n<p> font family.</p>\n<p>Can also be &#39;serif&#39; , &#39;monospace&#39;, ...</p>\n',
    )
    fontSize: Optional[float] = Field(12, description='\n\n<p> font size.</p>\n')
    lineHeight: Optional[float] = Field(
        None,
        description='\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',
    )
    width: Optional[float] = Field(
        None, description='\n\n<p>Width of text block.</p>\n'
    )
    height: Optional[float] = Field(
        None, description='\n\n<p>Height of text block.</p>\n'
    )
    textBorderColor: Optional[Any] = Field(
        None, description='\n\n<p>Stroke color of the text.</p>\n'
    )
    textBorderWidth: Optional[float] = Field(
        None, description='\n\n<p>Stroke line width of the text.</p>\n'
    )
    textBorderType: Optional[Union[str, float, Any]] = Field(
        'solid',
        description='\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',
    )
    textBorderDashOffset: Optional[float] = Field(
        0,
        description='<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',
    )
    textShadowColor: Optional[Any] = Field(
        'transparent', description='\n\n<p>Shadow color of the text itself.</p>\n'
    )
    textShadowBlur: Optional[float] = Field(
        0, description='\n\n<p>Shadow blue of the text itself.</p>\n'
    )
    textShadowOffsetX: Optional[float] = Field(
        0, description='\n\n<p>Shadow X offset of the text itself.</p>\n'
    )
    textShadowOffsetY: Optional[float] = Field(
        0, description='\n\n<p>Shadow Y offset of the text itself.</p>\n'
    )
    overflow: Optional[str] = Field(
        'none',
        description='\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',
    )
    ellipsis: Optional[str] = Field(
        '...',
        description='<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',
    )


class StateAnimation(BaseModel):
    """
    <p>Animation configurations of state switchment. Can be configured in each series individually.</p>

    """

    duration: Optional[float] = Field(
        300,
        description='<p>Duration of animation. Animation will be disabled when set to 0.</p>\n',
    )
    easing: Optional[str] = Field(
        'cubicOut', description='<p>Easing of animation.</p>\n'
    )


class Query(BaseModel):
    """
    <p>If more than one properties used, it means &quot;and&quot;.</p>

    """

    minWidth: Optional[float] = Field('undefined', description='')
    maxHeight: Optional[float] = Field('undefined', description='')
    minAspectRatio: Optional[float] = Field(
        'undefined',
        description='<p>That is the radio of <code class="codespan">width / height</code>. The value can be like <code class="codespan">1.3</code>.</p>\n',
    )


class MediaItem(BaseModel):
    query: Optional[Query] = Field(
        None,
        description='<p>If more than one properties used, it means &quot;and&quot;.</p>\n',
    )
    option: Optional[Any] = Field(
        None,
        description='<p>Each item of this array is an echarts option (<code class="codespan">ECUnitOption</code>). It will be applied when this query is matched.</p>\n',
    )


class Media(DataZoom):
    """
    <p>See <a href="tutorial.html#Responsive%20Mobile-End" target="_blank">Responsive Mobile-End</a> for details.</p>

    """

    pass


class EChartsOption(BaseModel):
    title: Optional[Title] = Field(
        None,
        description='<p>Title component, including main title and subtitle.</p>\n<p>In ECharts 2.x, a single instance of ECharts could contains one title component at most. However, in ECharts 3, there could be one or more than one title components. It is more useful when multiple diagrams in one instance all need titles.</p>\n<p><strong>Here are some instances of different animation easing functions, among which every instance has a title component: </strong></p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-easing&edit=1&reset=1" width="700" height="400"></iframe>\n\n\n\n',
    )
    legend: Optional[Legend] = Field(
        None,
        description='<p>Legend component.</p>\n<p>Legend component shows symbol, color and name of different series. You can click legends to toggle displaying series in the chart.</p>\n<p>In ECharts 3, a single echarts instance may contain multiple legend components, which makes it easier for the layout of multiple legend components.</p>\n<p>If there have to be too many legend items, <a href="http://localhost/echarts-website/examples/en/editor.html?c=pie-legend&amp;edit=1&amp;reset=1" target="_blank">vertically scrollable legend</a> or <a href="http://localhost/echarts-website/examples/en/editor.html?c=radar2&amp;edit=1&amp;reset=1" target="_blank">horizontally scrollable legend</a> are options to paginate them. Check <a href="#legend.type">legend.type</a> please.</p>\n',
    )
    grid: Optional[Union[List[Grid], Grid]] = Field(
        None,
        description='<p>Drawing grid in rectangular coordinate. In a single grid, at most two X and Y axes each is allowed. <a href="#series-line">Line chart</a>, <a href="#series-bar">bar chart</a>, and <a href="#series-scatter">scatter chart (bubble chart)</a> can be drawn in grid.</p>\n<p>In ECharts 2.x, there could only be one single grid component at most in a single echarts instance. But in ECharts 3, there is no limitation.</p>\n<p><strong>Following is an example of Anscombe Quartet:</strong></p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=scatter-anscombe-quartet&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    xAxis: Optional[Union[List[XAxis], XAxis]] = Field(
        None,
        description='<p>The x axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 x axis, one on the bottom and another on the top. <a href="#xAxis.offset">offset</a> can be used to avoid overlap when you need to put more than two x axis.</p>\n',
    )
    yAxis: Optional[Union[List[YAxis], YAxis]] = Field(
        None,
        description='<p>The y axis in cartesian(rectangular) coordinate. Usually a single grid component can place at most 2 y axis, one on the left and another on the right. <a href="#yAxis.offset">offset</a> can be used to avoid overlap when you need to put more than two y axis.</p>\n',
    )
    polar: Optional[Polar] = Field(
        None,
        description='<p>Polar coordinate can be used in scatter and line chart. Every polar coordinate has an <a href="#angleAxis">angleAxis</a> and a <a href="#radiusAxis">radiusAxis</a>.</p>\n<p><strong>For example: </strong></p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=scatter-polar-punchCard&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    radiusAxis: Optional[RadiusAxis] = Field(
        None, description='<p>Radial axis of polar coordinate.</p>\n'
    )
    angleAxis: Optional[AngleAxis] = Field(
        None, description='<p>The angle axis in Polar Coordinate.</p>\n'
    )
    radar: Optional[Radar] = Field(
        None,
        description='<p>Coordinate for <a href="#series-radar">radar charts</a>. This component is equal to the polar component in ECharts 2. Because the polar component in the echarts 3 is reconstructed to be the standard polar coordinate component, this component is renamed to be radar to avoid confusion.</p>\n<p>Radar chart coordinate is different from polar coordinate, in that every axis indicator of the radar chart coordinate is an individual dimension. The style of indicator coordinate axis could be configured through the following configuration items, including <a href="#radar.name">name</a>, <a href="#radar.axisLine">axisLine</a>, <a href="#radar.axisTick">axisTick</a>, <a href="#radar.axisLabel">axisLabel</a>, <a href="#radar.splitLine">splitLine</a>, <a href="#radar.splitArea">splitArea</a>.</p>\n<p>Here is a custom example of radar component.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/radar&edit=1&reset=1" width="400" height="400"></iframe>\n\n\n\n',
    )
    dataZoom: Optional[
        Union[List[Union[DataZoomItem, DataZoomItem1]], DataZoom]
    ] = Field(
        None,
        description='<p><code class="codespan">dataZoom</code> component is used for zooming a specific area, which enables user to investigate data in detail, or get an overview of the data, or get rid of outlier points.</p>\n<p>These types of <code class="codespan">dataZoom</code> component are supported:</p>\n<ul>\n<li><p><a href="#dataZoom-inside">dataZoomInside</a>: Data zoom functionalities is embeded inside coordinate systems, enable user to zoom or roam coordinate system by mouse dragging, mouse move or finger touch (in touch screen).</p>\n</li>\n<li><p><a href="#dataZoom-slider">dataZoomSlider</a>: A special slider bar is provided, on which coordinate systems can be zoomed or roamed by mouse dragging or finger touch (in touch screen).</p>\n</li>\n<li><p><a href="#toolbox.feature.dataZoom">dataZoomSelect</a>: A marquee tool is provided for zooming or roaming coordinate system. That is <a href="#toolbox.feature.dataZoom">toolbox.feature.dataZoom</a>, which can only be configured in toolbox.</p>\n</li>\n</ul>\n<p>Example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/scatter-dataZoom-all&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n<p><br></p>\n<hr>\n<p><strong>✦ Relationship between dataZoom and axis ✦</strong></p>\n<p>Basically <code class="codespan">dataZoom</code> component operates &quot;window&quot; on axis to zoom or roam coordinate system.</p>\n<blockquote>\n<p>Use <a href="#dataZoom.xAxisIndex">dataZoom.xAxisIndex</a> or <a href="#dataZoom.yAxisIndex">dataZoom.yAxisIndex</a> or <a href="#dataZoom.radiusAxisIndex">dataZoom.radiusAxisIndex</a> or <a href="#dataZoom.angleAxisIndex">dataZoom.angleAxisIndex</a> to specify which axes are operated by <code class="codespan">dataZoom</code>.</p>\n</blockquote>\n<p>A single chart instance can contain several <code class="codespan">dataZoom</code> components, each of which controls different axes. The <code class="codespan">dataZoom</code> components that control the same axis will be automatically linked (i.e., all of them will be updated when one of them is updated by user action or API call).</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How dataZoom componets operates axes and data ✦</strong></p>\n<p>Generally <code class="codespan">dataZoom</code> component zoom or roam coordinate system through data filtering and set the windows of axes internally.</p>\n<p>Its behaviours vary according to filtering mode settings (<a href="#dataZoom.filterMode">dataZoom.filterMode</a>).</p>\n<p>Possible values:</p>\n<ul>\n<li><p>&#39;filter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered if one of the relevant dimensions is out of the window.</p>\n</li>\n<li><p>&#39;weakFilter&#39;: data that outside the window will be <strong>filtered</strong>, which may lead to some changes of windows of other axes. For each data item, it will be filtered only if all of the relevant dimensions are out of the same side of the window.</p>\n</li>\n<li><p>&#39;empty&#39;: data that outside the window will be <strong>set to NaN</strong>, which will not lead to changes of windows of other axes.</p>\n</li>\n<li><p>&#39;none&#39;: Do not filter data.</p>\n</li>\n</ul>\n<p>How to set <code class="codespan">filterMode</code> is up to users, depending on the requirments and scenarios. Expirically:</p>\n<ul>\n<li><p>If only <code class="codespan">xAxis</code> or only <code class="codespan">yAxis</code> is controlled by <code class="codespan">dataZoom</code>, <code class="codespan">filterMode: &#39;filter&#39;</code> is typically used, which enable the other axis auto adapte its window to the extent of the filtered data.</p>\n</li>\n<li><p>If both <code class="codespan">xAxis</code> and <code class="codespan">yAxis</code> are operated by <code class="codespan">dataZoom</code>:</p>\n<ul>\n<li><p>If <code class="codespan">xAxis</code> and <code class="codespan">yAxis</code> should not effect mutually (e.g. a scatter chart with both axes on the type of <code class="codespan">&#39;value&#39;</code>), they should be set to be <code class="codespan">filterMode: &#39;empty&#39;</code>.</p>\n</li>\n<li><p>If <code class="codespan">xAxis</code> is the main axis and <code class="codespan">yAxis</code> is the auxiliary axis (or vise versa) (e.g., in a bar chart, when dragging <code class="codespan">dataZoomX</code> to change the window of xAxis, we need the yAxis to adapt to the clipped data, but when dragging <code class="codespan">dataZoomY</code> to change the window of yAxis, we need the xAxis not to be changed), in this case, <code class="codespan">xAxis</code> should be set to be <code class="codespan">fiterMode: &#39;filter&#39;</code>, while <code class="codespan">yAxis</code> should be set to be <code class="codespan">fiterMode: &#39;empty&#39;</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>It can be demonstrated by the sample:</p>\n<pre><code class="lang-javascript">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;\n        }\n    ],\n    xAxis: {type: &#39;value&#39;},\n    yAxis: {type: &#39;value&#39;},\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second coloum corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>In the sample above, <code class="codespan">dataZoomX</code> is set as <code class="codespan">filterMode: &#39;filter&#39;</code>. When use drags <code class="codespan">dataZoomX</code> (do not touch <code class="codespan">dataZoomY</code>) and the valueWindow of <code class="codespan">xAxis</code> is changed to <code class="codespan">[2, 50]</code> consequently, <code class="codespan">dataZoomX</code> travel the first column of series.data and filter items that out of the window. The series.data turns out to be:</p>\n<pre><code class="lang-javascript">[\n    [12, 24, 36],\n    // [90, 80, 70] This item is filtered, as 90 is out of the window.\n    [3, 9, 27]\n    // [1, 11, 111] This item is filtered, as 1 is out of the window.\n]\n</code></pre>\n<p>Before filtering, the second column, which corresponds to yAxis, has values <code class="codespan">24</code>, <code class="codespan">80</code>, <code class="codespan">9</code>, <code class="codespan">11</code>. After filtering, only <code class="codespan">24</code> and <code class="codespan">9</code> are left. Then the extent of <code class="codespan">yAxis</code> is adjusted to adapt the two values (if <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> are not set).</p>\n<p>So <code class="codespan">filterMode: &#39;filter&#39;</code> can be used to enable the other axis to auto adapt the filtered data.</p>\n<p>Then let&#39;s review the sample from the beginning, <code class="codespan">dataZoomY</code> is set as <code class="codespan">filterMode: &#39;empty&#39;</code>. So if user drags <code class="codespan">dataZoomY</code> (do not touch <code class="codespan">dataZoomX</code>) and its window is changed to <code class="codespan">[10, 60]</code> consequently, <code class="codespan">dataZoomY</code> travels the second column of series.data and set NaN to all of the values that outside the window (NaN cause the graphical elements, i.e., bar elements, do not show, but still hold the place). The series.data turns out to be:</p>\n<pre><code class="lang-javascript">[\n    [12, 24, 36],\n    [90, NaN, 70], // Set to NaN\n    [3, NaN, 27],  // Set to NaN\n    [1, 11, 111]\n]\n</code></pre>\n<p>In this case, the first column (i.e., <code class="codespan">12</code>, <code class="codespan">90</code>, <code class="codespan">3</code>, <code class="codespan">1</code>, which corresponds to <code class="codespan">xAxis</code>), will not be changed at all. So dragging <code class="codespan">yAxis</code> will not change extent of <code class="codespan">xAxis</code>, which is good for requirements like outlier filtering.</p>\n<p>See this example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/bar-dataZoom-filterMode&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n\n\n\n\n<p>Moreover, when <code class="codespan">min</code>, <code class="codespan">max</code> of an axis is set (e.g., <code class="codespan">yAxis: {min: 0, max: 400}</code>), this extent of the axis will not be modified by the behaviour of dataZoom of other axis any more.</p>\n<p><br></p>\n<hr>\n<p><strong>✦ How to set window ✦</strong></p>\n<p>You can set the current window in two forms:</p>\n<ul>\n<li><p>percent value: see <a href="#dataZoom.start">dataZoom.start</a> and <a href="#dataZoom.end">dataZoom.end</a>.</p>\n</li>\n<li><p>absolute value: see <a href="#dataZoom.startValue">dataZoom.startValue</a> and <a href="#dataZoom.endValue">dataZoom.endValue</a>.</p>\n</li>\n</ul>\n<p>Notice: If use percent value form, and it is in the scenario below, the result of dataZoom depends on the sequence of dataZoom definitions appearing in <code class="codespan">option</code>.</p>\n<pre><code class="lang-javascript">option = {\n    dataZoom: [\n        {\n            id: &#39;dataZoomX&#39;,\n            type: &#39;slider&#39;,\n            xAxisIndex: [0],\n            filterMode: &#39;filter&#39;,   // Set as &#39;filter&#39; so that the modification\n                                    // of window of xAxis willl effect the\n                                    // window of yAxis.\n            start: 30,\n            end: 70\n        },\n        {\n            id: &#39;dataZoomY&#39;,\n            type: &#39;slider&#39;,\n            yAxisIndex: [0],\n            filterMode: &#39;empty&#39;,\n            start: 20,\n            end: 80\n        }\n    ],\n    xAxis: {\n        type: &#39;value&#39;\n    },\n    yAxis: {\n        type: &#39;value&#39;\n        // Notice there is no min or max set to\n        // restrict the view extent of yAxis.\n    },\n    series{\n        type: &#39;bar&#39;,\n        data: [\n            // The first column corresponds to xAxis,\n            // and the second column corresponds to yAxis.\n            [12, 24, 36],\n            [90, 80, 70],\n            [3, 9, 27],\n            [1, 11, 111]\n        ]\n    }\n}\n</code></pre>\n<p>What is the exact meaning of <code class="codespan">start: 20, end: 80</code> in <code class="codespan">dataZoomY</code> in the example above?</p>\n<ul>\n<li><p>If <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> are set:</p>\n<p>  <code class="codespan">start: 20, end: 80</code> of <code class="codespan">dataZoomY</code> means: from <code class="codespan">20%</code> to <code class="codespan">80%</code> out of <code class="codespan">[yAxis.min, yAxis.max]</code>.</p>\n<p>  If one of <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> is not set, the corresponding edge of the full extend also follow rule as follows.</p>\n</li>\n<li><p>If <code class="codespan">yAxis.min</code> and <code class="codespan">yAxis.max</code> are not set:</p>\n<ul>\n<li><p>If <code class="codespan">dataZoomX</code> is set to be <code class="codespan">filterMode: &#39;empty&#39;</code>:</p>\n<p>  <code class="codespan">start: 20, end: 80</code> of <code class="codespan">dataZoomY</code> means: from <code class="codespan">20%</code> to <code class="codespan">80%</code> out of <code class="codespan">[dataMinY to dataMaxY]</code> of series.data (i.e., <code class="codespan">[9, 80]</code> in the example above).</p>\n</li>\n<li><p>If <code class="codespan">dataZoomX</code> is set to <code class="codespan">filterMode: &#39;filter&#39;</code>:</p>\n<p>  Since <code class="codespan">dataZoomX</code> is defined before <code class="codespan">dataZoomY</code>, <code class="codespan">start: 30, end: 70</code> of <code class="codespan">dataZoomX</code> means: from <code class="codespan">30%</code> to <code class="codespan">70%</code> out of full series.data, whereas <code class="codespan">start: 20, end: 80</code> of <code class="codespan">dataZoomY</code> means: from <code class="codespan">20%</code> to <code class="codespan">80%</code> out of the series.data having been filtered by <code class="codespan">dataZoomX</code>.</p>\n<p>  If you want to change the process sequence, you can just change the sequence of the definitions apearing in <code class="codespan">option</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><br>\n<br></p>\n',
    )
    visualMap: Optional[
        Union[List[Union[VisualMapItem, VisualMapItem1]], VisualMap]
    ] = Field(
        None,
        description='<p><code class="codespan">visualMap</code> is a type of component for visual encoding, which maps the data to visual channels, including:</p>\n<ul>\n<li><code class="codespan">symbol</code>: Type of symbol.</li>\n<li><code class="codespan">symbolSize</code>: Symbol size.</li>\n<li><code class="codespan">color</code>: Symbol color.</li>\n<li><code class="codespan">colorAlpha</code>: Symbol alpha channel.</li>\n<li><code class="codespan">opacity</code>: Opacity of symbol and others (like labels).</li>\n<li><code class="codespan">colorLightness</code>: Lightness in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorSaturation</code>: Saturation in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n<li><code class="codespan">colorHue</code>: Hue in <a href="https://en.wikipedia.org/wiki/HSL_and_HSV" target="_blank">HSL</a>.</li>\n</ul>\n<p>Myltiple <code class="codespan">visualMap</code> component could be defined in a chart instance, which enable that different dimensions of a series data are mapped to different visual channels.</p>\n<p><code class="codespan">visualMap</code> could be defined as <a href="#visualMap-piecewise">Piecewise (visualMapPiecewise)</a> or <a href="#visualMap-continuous">Continuous (visualMapContinuous)</a>, which is distinguished by the property <code class="codespan">type</code>. For instance:</p>\n<pre><code class="lang-javascript">option = {\n    visualMap: [\n        { // the first visualMap component\n            type: &#39;continuous&#39;, // defined to be continuous visualMap\n            ...\n        },\n        { // the second visualMap component\n            type: &#39;piecewise&#39;, // defined to be piecewise visualMap\n            ...\n        }\n    ],\n    ...\n};\n</code></pre>\n<p><br>\n<strong>✦ Configure mapping ✦</strong></p>\n<p>The dimension of <a href="#series.data">series.data</a> can be specified by <a href="#visualMap.dimension">visualMap.dimension</a>, from which the value can be retrieved and mapped onto visual channels, which can be defined in <a href="#visualMap.inRange">visualMap.inRange</a> and <a href="#visualMap.outOfRange">visualMap.outOfRange</a>.</p>\n<p><br>\nIn series that controlled by visualMap, if a data item needs to escape from controlled by visualMap, you can set like this:</p>\n<pre><code>series: {\n    type: &#39;...&#39;,\n    data: [\n        {name: &#39;Shanghai&#39;, value: 251},\n        {name: &#39;Haikou&#39;, value: 21},\n        // Mark as `visualMap: false`, then this item does not controlled by visualMap any more,\n        // and series visual config (like color, symbol, ...) can be used to this item.\n        {name: &#39;Beijing&#39;, value: 821, },\n        ...\n    ]\n}\n</code></pre><p><br>\n<strong>✦ The relationship between visualMap of ECharts3 and dataRange of ECharts2 ✦</strong></p>\n<p><code class="codespan">visualMap</code> is renamed from the <code class="codespan">dataRange</code> of ECharts2, and the scope of functionalities are extended a lot. The configurations of <code class="codespan">dataRange</code> are still compatible in ECharts3, which automatically convert them to <code class="codespan">visualMap</code>. It is recommended to use <code class="codespan">visualMap</code> instead of <code class="codespan">dataRange</code> in ECharts3.</p>\n<p><br>\n<strong>✦ The detailed configurations of visualMap are elaborated as follows. ✦</strong></p>\n<p><br>\n<br></p>\n',
    )
    tooltip: Optional[Tooltip2] = Field(
        None,
        description='<p>Tooltip component.</p>\n<hr>\n<p><strong>General Introduction:</strong></p>\n<p>tooltip can be configured on different places:</p>\n<ul>\n<li><p>Configured on global: <a href="#tooltip">tooltip</a></p>\n</li>\n<li><p>Configured in a coordinate system: <a href="#grid.tooltip">grid.tooltip</a>, <a href="#polar.tooltip">polar.tooltip</a>, <a href="#single.tooltip">single.tooltip</a></p>\n</li>\n<li><p>Configured in a series: <a href="#series.tooltip">series.tooltip</a></p>\n</li>\n<li><p>Configured in each item of <code class="codespan">series.data</code>: <a href="#series.data.tooltip">series.data.tooltip</a></p>\n</li>\n</ul>\n\n\n\n',
    )
    axisPointer: Optional[AxisPointer7] = Field(
        None,
        description='<p>This is the global configurations of axisPointer.</p>\n<hr>\n<p><code class="codespan">axisPointer</code> is a tool for displaying reference line and axis value under mouse pointer.</p>\n<p>For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/candlestick-axisPointer&edit=1&reset=1" width="600" height="450"></iframe>\n\n\n<p>In the demo above, <a href="#axisPointer.link">axisPointer.link</a> is used to link axisPointer from different coordinate systems.</p>\n<p><code class="codespan">axisPointer</code> can also be used on touch device, where user can drag the button to move the reference line and label.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-tooltip-touch&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n<p>In the cases that more than one axis exist, axisPointer helps to look inside the data.</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-y-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=multiple-x-axis&edit=1&reset=1" width="600" height="300"></iframe>\n\n\n\n<hr>\n<blockquote>\n<p><strong>Notice:</strong>\nGenerally, axisPointers is configured in each axes who need them (for example <a href="#xAxis.axisPointer">xAxis.axisPointer</a>), or configured in <code class="codespan">tooltip</code> (for example <a href="#tooltip.axisPointer">tooltip.axisPointer</a>).</p>\n</blockquote>\n<blockquote>\n<p>But these configurations can only be configured in global axisPointer:\n<a href="#axisPointer.triggerOn">axisPointer.triggerOn</a>, <a href="#axisPointer.link">axisPointer.link</a>.</p>\n</blockquote>\n<hr>\n<hr>\n<p><strong>How to display axisPointer:</strong></p>\n<p>In <a href="#grid">cartesian (grid)</a> and <a href="#single">polar](~polar) and (single axis</a>, each axis has its own axisPointer.</p>\n<p>Those axisPointer will not be displayed by default, utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.show</code> (like <a href="#xAxis.axisPointer.show">xAxis.axisPointer.show</a>) as <code class="codespan">true</code>. Then axisPointer of this axis will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.trigger">tooltip.trigger</a> as <code class="codespan">&#39;axis&#39;</code>, or set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as <code class="codespan">&#39;cross&#39;</code>. Then coordinate system will automatically chose the axes who will display their axisPointers. (<a href="#tooltip.axisPointer.axis">tooltip.axisPointer.axis</a> can be used to change the choice.) Notice, <code class="codespan">axis.axisPointer</code> will override <code class="codespan">tooltip.axisPointer</code> settings.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to display the label of axisPointer:</strong></p>\n<p>The label of axisPointer will not be displayed by default(namely, only reference line will be displayed by default), utill configured as follows:</p>\n<ul>\n<li><p>Set <code class="codespan">someAxis.axisPointer.label.show</code> (for example <a href="#xAxis.axisPointer.show">xAxis.axisPointer.label.show</a>) as <code class="codespan">true</code>. Then the label of the axisPointer will be displayed.</p>\n</li>\n<li><p>Set <a href="#tooltip.axisPointer.type">tooltip.axisPointer.type</a> as  <code class="codespan">&#39;cross&#39;</code>. Then the label of the crossed axisPointers will be displayed.</p>\n</li>\n</ul>\n<hr>\n<p><strong>How to configure axisPointer on touch device:</strong></p>\n<p>Set <code class="codespan">someAxis.axisPointer.handle.show</code> (for example <a href="#xAxis.axisPointer.handle.show">xAxis.axisPointer.handle.show</a> as <code class="codespan">true</code>. Then the button for dragging will be displayed. (This feature is not supported on polar).</p>\n<p><strong>Notice:</strong>\nIf tooltip does not work well in this case, try to set<a href="#tooltip.triggerOn">tooltip.triggerOn</a> as <code class="codespan">&#39;none&#39;</code> (for the effect: show tooltip when finger holding on the button, and hide tooltip after finger left the button), or set <a href="#tooltip.alwaysShowContent">tooltip.alwaysShowContent</a> as <code class="codespan">true</code> (then tooltip will always be displayed).</p>\n<p>See the <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-tooltip-touch&amp;edit=1&amp;reset=1" target="_blank">example</a>.</p>\n<hr>\n<p><strong>Snap to point</strong></p>\n<p>In value axis and time axis, if <a href="#xAxis.axisPointer.snap">snap</a> is set as true, axisPointer will snap to point automatically.</p>\n<hr>\n<hr>\n',
    )
    toolbox: Optional[Toolbox] = Field(
        None,
        description='<p>A group of utility tools, which includes <a href="#toolbox.feature.saveAsImage">export</a>, <a href="#toolbox.feature.dataView">data view</a>, <a href="#toolbox.feature.magicType">dynamic type switching</a>, <a href="#toolbox.feature.dataZoom">data area zooming</a>, and <a href="#toolbox.feature.reset">reset</a>.</p>\n<p><strong>Example: </strong></p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-marker&reset=1&edit=1" width="600" height="400"></iframe>\n\n\n\n',
    )
    brush: Optional[Brush1] = Field(
        None,
        description='<p><code class="codespan">brush</code> is an area-selecting component, with which user can select part of data from a chart to display in detail, or do calculations with them.</p>\n<p><br></p>\n<hr>\n<p><strong>Brush type and triggering button</strong></p>\n<p>Currently, supported <code class="codespan">brush</code> types include: <code class="codespan">scatter</code>, <code class="codespan">bar</code>, <code class="codespan">candlestick</code>. (Note that <code class="codespan">parallel</code> contains brush function by itself, which is not provided by brush component.)</p>\n<p>Click the button in <code class="codespan">toolbox</code> to enable operations like <em>area selecting</em>, or <em>canceling selecting</em>.</p>\n<p><br>\nExample of <code class="codespan">horizontal brush</code>: (Click the button in <code class="codespan">toolbox</code> to enable brushing.)</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=candlestick-brush&edit=1&reset=1" width="800" height="500"></iframe>\n\n\n<p><br>\nExample of <code class="codespan">brush</code> in <code class="codespan">bar</code> charts:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=bar-brush&edit=1&reset=1" width="800" height="400"></iframe>\n\n\n\n<p>Button for <code class="codespan">brush</code> can be assigned in <a href="#toolbox.feature.brush.type"><code class="codespan">toolbox</code></a> or <a href="#brush.toolbox"><code class="codespan">brush</code> configuration</a>.</p>\n<p>The following types of brushes are supported: <code class="codespan">rect</code>, <code class="codespan">polygon</code>, <code class="codespan">lineX</code>, <code class="codespan">lineY</code>. See <a href="#brush.toolbox">brush.toolbox</a> for more information.</p>\n<p><code class="codespan">keep</code> button can be used to toggle a single or multiple selections.</p>\n<ul>\n<li>Only one select box is available in single selection mode, and the select-box can be removed by clicking on the blank area.</li>\n<li>Multiple select boxes are available in multiple selection mode, and the select-boxes cannot be removed by click on the blank area. Instead, you need to click the <em>clear</em> button.</li>\n</ul>\n<p><br></p>\n<hr>\n<p><strong>Relationship between brush-selecting and coordinates</strong></p>\n<p><code class="codespan">brush</code> can be set to be <em>global</em>, or <em>belonging to a particular coordinate</em>.</p>\n<p><strong>Global brushes</strong></p>\n<p>Selecting is enabled for everywhere in ECharts&#39;s instance in this case. This is the default situation, when brush is not set to be global.</p>\n<p><strong>Coordinate brushes</strong></p>\n<p>Selecting is enabled only in the assigned coordinates in this case. Selecting-box will be altered according to scaling and translating of coordinate (see <code class="codespan">roam</code> and <code class="codespan">dataZoom</code>).</p>\n<p>In practice, you may often find coordinate brush to be a more frequently made choice, particularly in <code class="codespan">geo</code> charts.</p>\n<p>By assigning <a href="#brush.geoIndex">brush.geoIndex</a>, or <a href="#brush.xAxisIndex">brush.xAxisIndex</a>, or <a href="#brush.yAxisIndex">brush.yAxisIndex</a>, brush selecting axes can be assigned, whose value can be:</p>\n<ul>\n<li><code class="codespan">&#39;all&#39;</code>: for all axes;</li>\n<li><code class="codespan">number</code>: like <code class="codespan">0</code>, for a particular coordinate with that index;</li>\n<li><code class="codespan">Array</code>: like <code class="codespan">[0, 4, 2]</code>, for coordinates with those indexes;</li>\n<li><code class="codespan">&#39;none&#39;</code>, or <code class="codespan">null</code>, or <code class="codespan">undefined</code>: for not assigning.</li>\n</ul>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    geo: {\n        ...\n    },\n    brush: {\n        geoIndex: &#39;all&#39;, // brush selecting is enabled only in all geo charts above\n        ...\n    }\n};\n</code></pre>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    grid: [\n        {...}, // grid 0\n        {...}  // grid 1\n    ],\n    xAxis: [\n        {gridIndex: 1, ...}, // xAxis 0 for grid 1\n        {gridIndex: 0, ...}  // xAxis 1 for grid 0\n    ],\n    yAxis: [\n        {gridIndex: 1, ...}, // yAxis 0 for grid 1\n        {gridIndex: 0, ...}  // yAxis 1 for grid 0\n    ],\n    brush: {\n        xAxisIndex: [0, 1], // brush selecting is enabled only in coordinates with xAxisIndex as `0` or `1`\n        ...\n    }\n};\n</code></pre>\n<p><br></p>\n<hr>\n<p><strong>Control select-box with API</strong></p>\n<p><code class="codespan">dispatchAction</code> can be used to render select-box programatically. For example:</p>\n<pre><code class="lang-javascript">myChart.dispatchAction({\n    type: &#39;brush&#39;,\n    areas: [\n        {\n            geoIndex: 0,\n            // Assign select-box type\n            brushType: &#39;polygon&#39;,\n            // Assign select-box shape\n            coordRange: [[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]]\n        }\n    ]\n});\n</code></pre>\n<p>Please refer to <a href="api.html#action.brush" target="_blank">action.brush</a> for more information.</p>\n<p><br></p>\n<hr>\n<p><strong>brushLink</strong></p>\n<p>Links interaction between selected items in different series.</p>\n<p>Following is an example of enabling selected effect for <code class="codespan">scatter</code> and <code class="codespan">parallel</code> charts once a scatter chart is selected.</p>\n<p><code class="codespan">brushLink</code> is an array of <code class="codespan">seriesIndex</code>es, which assignes the series that can be interacted. For example, it can be:</p>\n<ul>\n<li><code class="codespan">[3, 4, 5]</code> for interacting series with seriesIndex as <code class="codespan">3</code>, <code class="codespan">4</code>, or <code class="codespan">5</code>;</li>\n<li><code class="codespan">&#39;all&#39;</code> for interacting all series;</li>\n<li><code class="codespan">&#39;none&#39;</code>, or <code class="codespan">null</code>, or <code class="codespan">undefined</code> for disabling <code class="codespan">brushLink</code>.</li>\n</ul>\n<p><strong>Attention</strong></p>\n<p><code class="codespan">brushLink</code> is a mapping of <code class="codespan">dataIndex</code>. So <strong><code class="codespan">data</code> of every series with <code class="codespan">brushLink</code> should be guaranteed to correspond to the other</strong>.</p>\n<p>Example:</p>\n<pre><code class="lang-javascript">option = {\n    brush: {\n        brushLink: [0, 1]\n    },\n    series: [\n        {\n            type: &#39;bar&#39;\n            data: [232,    4434,    545,      654]     // data has 4 items\n        },\n        {\n            type: &#39;parallel&#39;,\n            data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data also has 4 items, which correspond to the data above\n        }\n    ]\n};\n</code></pre>\n<p>Please refer to <a href="#brush.brushLink">brush.brushLink</a>.</p>\n<p><br></p>\n<hr>\n<p><strong>throttle / debounce</strong></p>\n<p>By default, <code class="codespan">brushSelected</code> is always triggered when selection-box is selected or moved, to tell the outside about the event.</p>\n<p>But efficiency problems may occur when events are triggered too frequently, or the animation result may be affected. So brush components provides <a href="#brush.throttleType">brush.throttleType</a> and <a href="#brush.throttleDelay">brush.throttleDelay</a> to solve this problem.</p>\n<p>Valid <code class="codespan">throttleType</code> values can be:</p>\n<ul>\n<li><code class="codespan">&#39;debounce&#39;</code>: for triggering events only when the action has been stopped (no action after some duration). Time threshold can be assigned with <a href="#brush.throttleDelay">brush.throttleDelay</a>;</li>\n<li><code class="codespan">&#39;fixRate&#39;</code>: for triggering event with a certain frequency. The frequency can be assigned with <a href="#brush.throttleDelay">brush.throttleDelay</a>.</li>\n</ul>\n<p>In this <a href="http://localhost/echarts-website/examples/en/view.html?c=scatter-map-brush&amp;edit=1&amp;reset=1" target="_blank">example</a>, <code class="codespan">debounce</code> is used to make sure the bar chart is updated only when the user has stopped action. In other cases, the animation result may not be so good.</p>\n<p><br></p>\n<hr>\n<p><strong>Visual configurations of selected and unselected items</strong></p>\n<p>Refer to <a href="#brush.inBrush">brush.inBrush</a> and <a href="#brush.outOfBrush">brush.outOfBrush</a>.</p>\n<p><br></p>\n<hr>\n<p>Here is the configuration in detail.</p>\n',
    )
    geo: Optional[Geo] = Field(
        None,
        description='<p>Geographic coorinate system component.</p>\n<p>Geographic coorinate system component is used to draw maps, which also supports <a href="#series-scatter">scatter series</a>, and <a href="#series-lines">line series</a>.</p>\n<p>From <code class="codespan">3.1.10</code>, geo component also supports mouse events, whose parameters are:</p>\n<pre><code class="lang-ts">{\n    componentType: &#39;geo&#39;,\n    // geo component&#39;s index in option\n    geoIndex: number,\n    // name of clicking area, e.g., Shanghai\n    name: string,\n    // clicking region object as input, see geo.regions\n    region: Object\n}\n</code></pre>\n<p><strong>Tip:</strong>\nThe region color can also be controlled by map series. See <a href="#series-map.geoIndex">series-map.geoIndex</a>.</p>\n',
    )
    parallel: Optional[Parallel] = Field(
        None,
        description='<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href="https://en.wikipedia.org/wiki/Parallel_coordinates" target="_blank">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href="#series-parallel.data">series-parallel.data</a> is the following data:</p>\n<pre><code class="lang-javascript">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/parallel-all&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class="lang-javascript">option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: &#39;category&#39;,           // Also supports category data.\n            data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: &#39;5%&#39;,                     // Location of parallel coordinate system.\n        right: &#39;13%&#39;,\n        bottom: &#39;10%&#39;,\n        top: &#39;20%&#39;,\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: &#39;value&#39;,\n            nameLocation: &#39;end&#39;,\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: &#39;Beijing&#39;,\n            type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n                [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Shanghai&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Guangzhou&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],\n                ...\n            ]\n        }\n    ]\n};\n</code></pre>\n<p>Three components are involved here: <a href="#parallel">parallel</a>, <a href="#parallelAxis">parallelAxis</a>, <a href="#series-parallel">series-parallel</a></p>\n<ul>\n<li><p><a href="#parallel">parallel</a></p>\n<p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p>  Position setting is also carried out here.</p>\n</li>\n<li><p><a href="#parallelAxis">parallelAxis</a></p>\n<p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href="#series-parallel">series-parallel</a></p>\n<p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href="#parallelAxis">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> will be merged into <a href="#parallelAxis">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href="#series-parallel.lineStyle.width">series-parallel.lineStyle.width</a> to be <code class="codespan">0.5</code> (or less), which may improve performance significantly.</p>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href="#parallel.axisExpandable">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=map-parallel-prices&edit=1&reset=1" width="600" height="460"></iframe>\n\n\n\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n',
    )
    parallelAxis: Optional[ParallelAxis] = Field(
        None,
        description='<p>This component is the coordinate axis for parallel coordinate.</p>\n<p><strong>Introduction about Parallel coordinates</strong></p>\n<p><a href="https://en.wikipedia.org/wiki/Parallel_coordinates" target="_blank">Parallel Coordinates</a> is a common way of visualizing high-dimensional geometry and analyzing multivariate data.</p>\n<p>For example, <a href="#series-parallel.data">series-parallel.data</a> is the following data:</p>\n<pre><code class="lang-javascript">[\n    [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n    [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n    [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n    [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n    { // Data item can also be an Object, so that perticular settings of its line can be set here.\n        value: [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;]\n        lineStyle: {...},\n    }\n    ...\n]\n</code></pre>\n<p>In data above, each row is a &quot;data item&quot;, and each column represents a &quot;dimension&quot;. For example, the meanings of columns above are: &quot;data&quot;, &quot;AQI&quot;, &quot;PM2.5&quot;, &quot;PM10&quot;, &quot;carbon monoxide level&quot;, &quot;nitrogen dioxide level&quot;, and &quot;sulfur dioxide level&quot;.</p>\n<p>Parallel coordinates are often used to visualize multi-dimension data shown above. Each axis represents a dimension (namely, a column), and each line represents a data item. Data can be brush-selected on axes. For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/parallel-all&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n\n<p><strong>Brief about Configuration</strong></p>\n<p>Basic configuration parallel coordinates is shown as follow:</p>\n<pre><code class="lang-javascript">option = {\n    parallelAxis: [                     // Definitions of axes.\n        {dim: 0, name: schema[0].text}, // Each axis has a &#39;dim&#39; attribute, representing dimension index in data.\n        {dim: 1, name: schema[1].text},\n        {dim: 2, name: schema[2].text},\n        {dim: 3, name: schema[3].text},\n        {dim: 4, name: schema[4].text},\n        {dim: 5, name: schema[5].text},\n        {dim: 6, name: schema[6].text},\n        {dim: 7, name: schema[7].text,\n            type: &#39;category&#39;,           // Also supports category data.\n            data: [&#39;Excellent&#39;, &#39;good&#39;, &#39;light pollution&#39;, &#39;moderate pollution&#39;, &#39;heavy pollution&#39;, &#39;severe pollution&#39;]\n        }\n    ],\n    parallel: {                         // Definition of a parallel coordinate system.\n        left: &#39;5%&#39;,                     // Location of parallel coordinate system.\n        right: &#39;13%&#39;,\n        bottom: &#39;10%&#39;,\n        top: &#39;20%&#39;,\n        parallelAxisDefault: {          // A pattern for axis definition, which can avoid repeating in `parallelAxis`.\n            type: &#39;value&#39;,\n            nameLocation: &#39;end&#39;,\n            nameGap: 20\n        }\n    },\n    series: [                           // Here the three series sharing the same parallel coordinate system.\n        {\n            name: &#39;Beijing&#39;,\n            type: &#39;parallel&#39;,           // The type of this series is &#39;parallel&#39;\n            data: [\n                [1,  55,  9,   56,  0.46,  18,  6,  &#39;good&#39;],\n                [2,  25,  11,  21,  0.65,  34,  9,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Shanghai&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [3,  56,  7,   63,  0.3,   14,  5,  &#39;good&#39;],\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                ...\n            ]\n        },\n        {\n            name: &#39;Guangzhou&#39;,\n            type: &#39;parallel&#39;,\n            data: [\n                [4,  33,  7,   29,  0.33,  16,  6,  &#39;excellent&#39;],\n                [5,  42,  24,  44,  0.76,  40,  16, &#39;excellent&#39;],\n                ...\n            ]\n        }\n    ]\n};\n</code></pre>\n<p>Three components are involved here: <a href="#parallel">parallel</a>, <a href="#parallelAxis">parallelAxis</a>, <a href="#series-parallel">series-parallel</a></p>\n<ul>\n<li><p><a href="#parallel">parallel</a></p>\n<p>  This component is the coordinate system. One or more series (like &quot;Beijing&quot;, &quot;Shanghai&quot;, and &quot;Guangzhou&quot; in the above example) can share one coordinate system.</p>\n<p>  Like other coordinate systems, multiple parallel coordinate systems can be created in one echarts instance.</p>\n<p>  Position setting is also carried out here.</p>\n</li>\n<li><p><a href="#parallelAxis">parallelAxis</a></p>\n<p>  This is axis configuration. Multiple axes are needed in parallel coordinates.</p>\n<p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n<li><p><a href="#series-parallel">series-parallel</a></p>\n<p>  This is the definition of parallel series, which will be drawn on parallel coordinate system.</p>\n<p>  <a href="#parallelAxis.parallelIndex">parallelAxis.parallelIndex</a> is used to specify which coordinate system this axis belongs to. The first coordinate system is used by default.</p>\n</li>\n</ul>\n<p><strong>Notes and Best Practices</strong></p>\n<p>When configuring multiple <a href="#parallelAxis">parallelAxis</a>, there might be some common attributes in each axis configuration. To avoid writing them repeatly, they can be put under <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a>. Before initializing axis, configurations in <a href="#parallel.parallelAxisDefault">parallel.parallelAxisDefault</a> will be merged into <a href="#parallelAxis">parallelAxis</a> to generate the final axis configuration.</p>\n<p><strong>If data is too large and cause bad performance</strong></p>\n<p>It is suggested to set <a href="#series-parallel.lineStyle.width">series-parallel.lineStyle.width</a> to be <code class="codespan">0.5</code> (or less), which may improve performance significantly.</p>\n<p><strong>Display High-Dimension Data</strong></p>\n<p>When dimension number is extremely large, say, more than 50 dimensions, there will be more than 50 axes, which may hardly display in a page.</p>\n<p>In this case, you may use <a href="#parallel.axisExpandable">parallel.axisExpandable</a> to improve the display. See this example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=map-parallel-prices&edit=1&reset=1" width="600" height="460"></iframe>\n\n\n\n\n\n\n\n\n\n\n<p><br>\n<br></p>\n',
    )
    singleAxis: Optional[SingleAxis] = Field(
        None,
        description='<p>An axis with a single dimension. It can be used to display data in one dimension. For example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=scatter-single-axis&edit=1&reset=1" width="700" height="500"></iframe>\n\n\n\n',
    )
    timeline: Optional[Timeline] = Field(
        None,
        description='<p><code class="codespan">timeline</code> component, which provides functions like switching and playing between multiple ECharts <code class="codespan">options</code>.</p>\n<p>Here is an example:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=doc-example/mix-timeline-all&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n<p>Different from other cases, <code class="codespan">timeline</code> component requires multiple options. We call first the parameter of <code class="codespan">setOption</code> as <code class="codespan">ECOption</code>, and call the traditional single ECharts option as <code class="codespan">ECUnitOption</code>.</p>\n<ul>\n<li>In the case that <code class="codespan">timeline</code> and <code class="codespan">media query</code> are not set, an <code class="codespan">ECUnitOption</code> is an <code class="codespan">ECOption</code>.</li>\n<li>In the case that <code class="codespan">timeline</code> or <code class="codespan">media query</code> are set, an <code class="codespan">ECOption</code> is made up with several <code class="codespan">ECUnitOption</code>s.<ul>\n<li>The properties at the root of <code class="codespan">ECOption</code> form an <code class="codespan">ECUnitOption</code>, which is also called <code class="codespan">baseOption</code>, representing the default settings.</li>\n<li>Each item of the array <code class="codespan">options</code> form an <code class="codespan">ECUnitOption</code>, which can be also called <code class="codespan">switchableOption</code>, representing options for each time tick.</li>\n</ul>\n</li>\n<li><code class="codespan">baseOption</code> and one <code class="codespan">switchableOption</code> are used to calculate the <code class="codespan">finalOption</code>, based on which the chart will be final rendered.</li>\n</ul>\n<p>For example:</p>\n<pre><code class="lang-javascript">myChart.setOption({\n    // This is the properties of `baseOption`.\n    timeline: {\n        ...,\n        // each item in `timeline.data` corresponds to each\n        // `option` in `options` array.\n        data: [&#39;2002-01-01&#39;, &#39;2003-01-01&#39;, &#39;2004-01-01&#39;]\n    },\n    title: {\n        subtext: &#39; Data is from National Bureau of Statistics &#39;\n    },\n    grid: { ... },\n    xAxis: [ ... ],\n    yAxis: [ ... ],\n    series: [{\n        // other configurations of series 1\n        type: &#39;bar&#39;,\n        ...\n    }, {\n        // other configurations of series 2\n        type: &#39;line&#39;,\n        ...\n    }, {\n        // other configurations of series 3\n        type: &#39;pie&#39;,\n        ...\n    }],\n    // `switchableOption`s:\n    options: [{\n        // it is an option corresponding to &#39;2002-01-01&#39;\n        title: {\n        text: &#39;the statistics of the year 2002&#39;\n        },\n        series: [\n            { data: [] }, // the data of series 1\n            { data: [] }, // the data of series 2\n            { data: [] }  // the data of series 3\n        ]\n    }, {\n        // it is an option corresponding to &#39;2003-01-01&#39;\n        title: {\n            text: &#39;the statistics of the year 2003&#39;\n        },\n        series: [\n            { data: [] },\n            { data: [] },\n            { data: [] }\n        ]\n    }, {\n        // it is an option corresponding to &#39;2004-01-01&#39;\n        title: {\n            text: &#39;the statistics of the year 2004&#39;\n        },\n        series: [\n            { data: [] },\n            { data: [] },\n            { data: [] }\n        ]\n    }]\n});\n</code></pre>\n<p><br>\n<strong>How the <code class="codespan">finalOption</code> calculated?</strong></p>\n<p>When initializing, a <code class="codespan">switchableOption</code> corresponding to the current time tick are merged into <code class="codespan">baseOption</code> to form the <code class="codespan">finalOption</code>. Each time the current tick changed, the new <code class="codespan">switchableOption</code> corresponding to the new time tick are merged into the <code class="codespan">finalOption</code>.</p>\n<p>There are two merging strategy.</p>\n<ul>\n<li>By default, use <code class="codespan">NORMAL_MERGE</code>.</li>\n<li>If <a href="#option.html#timeline.replaceMerge">timeline.replaceMerge</a> is set, use <code class="codespan">REPLACE_MERGE</code>. See <a href="#api.html#echartsInstance.setOption">setOption</a> for more details of <code class="codespan">REPLACE_MERGE</code>.</li>\n</ul>\n<p><br>\n<strong>Compatibility with ECharts 4:</strong></p>\n<p>We also support these equivalent setting styles:</p>\n<pre><code class="lang-ts">option = {\n    baseOption: {\n        timeline: {},\n        series: [],\n        // ... other properties of baseOption.\n    },\n    options: []\n};\n</code></pre>\n',
    )
    graphic: Optional[Graphic] = Field(
        None,
        description='<p><code class="codespan">graphic</code> component enables creating graphic elements in ECharts.</p>\n<p>Those graphic type are supported.</p>\n<p><a href="#graphic.elements-image">image</a>,\n<a href="#graphic.elements-text">text</a>,\n<a href="#graphic.elements-circle">circle</a>,\n<a href="#graphic.elements-sector">sector</a>,\n<a href="#graphic.elements-ring">ring</a>,\n<a href="#graphic.elements-polygon">polygon</a>,\n<a href="#graphic.elements-polyline">polyline</a>,\n<a href="#graphic.elements-rect">rect</a>,\n<a href="#graphic.elements-line">line</a>,\n<a href="#graphic.elements-bezierCurve">bezierCurve</a>,\n<a href="#graphic.elements-arc">arc</a>,\n<a href="#graphic.elements-group">group</a>,</p>\n<p>This example shows how to make a watermark and text block:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-graphic&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n<p>This example use hidden graphic elements to implement dragging:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=line-draggable&edit=1&reset=1" width="600" height="400"></iframe>\n\n\n<p><strong>Graphic Component Configuration</strong></p>\n<p>A simple way to define a graphic element:</p>\n<pre><code class="lang-javascript">myChart.setOption({\n    ...,\n    graphic: {\n        type: &#39;image&#39;,\n        ...\n    }\n});\n</code></pre>\n<p>Define multiple graphic elements:</p>\n<pre><code class="lang-javascript">myChart.setOption({\n    ...,\n    graphic: [\n        { // A &#39;image&#39; element.\n            type: &#39;image&#39;,\n            ...\n        },\n        { // A &#39;text&#39; element, with id specified.\n            type: &#39;text&#39;,\n            id: &#39;text1&#39;,\n            ...\n        },\n        { // A &#39;group&#39; element, in which children can be defined.\n            type: &#39;group&#39;,\n            children: [\n                {\n                    type: &#39;rect&#39;,\n                    id: &#39;rect1&#39;,\n                    ...\n                },\n                {\n                    type: &#39;image&#39;,\n                    ...\n                },\n                ...\n            ]\n        }\n        ...\n    ]\n});\n\n</code></pre>\n<p>How to remove or replace existing elements by <code class="codespan">setOption</code>:</p>\n<pre><code class="lang-javascript">myChart.setOption({\n    ...,\n    graphic: [\n        { // Remove the element &#39;text1&#39; defined above.\n            id: &#39;text1&#39;,\n            $action: &#39;remove&#39;,\n            ...\n        },\n        { // Replace the element &#39;rect1&#39; to a new circle element.\n          // Note, although in the sample above &#39;rect1&#39; is a children of a group,\n          // it is not necessary to consider level relationship when setOption\n          // again if you use id to specify them.\n            id: &#39;rect1&#39;,\n            $action: &#39;replace&#39;,\n            type: &#39;circle&#39;,\n            ...\n        }\n    ]\n});\n</code></pre>\n<p>Notice, when using <code class="codespan">setOption</code> to modify existing elements, if id is not specified, new options will be mapped to existing elements by their order, which might bring unexpected result sometimes. So, generally, using id is recommended.</p>\n<p><strong>Graphic Element Configuration</strong></p>\n<p>Different types of graphic elements has their own configuration respectively, but they have these common configuration below:</p>\n<pre><code class="lang-javascript">{\n    // id is used to specifying element when willing to update it.\n    // id can be ignored if you do not need it.\n    id: &#39;xxx&#39;,\n\n    // Specify element type. Can not be ignored when define a element at the first time.\n    type: &#39;image&#39;,\n\n    // All of the properties below can be ignored and a default value will be assigned.\n\n    // Specify the operation should be performed to the element when calling `setOption`.\n    // Default value is &#39;merge&#39;, other values can be &#39;replace&#39; or &#39;remove&#39;.\n    $action: &#39;replace&#39;,\n\n    // These four properties is used to locating the element. Each property can be absolute\n    // value (like 10, means 10 pixel) or precent (like &#39;12%&#39;) or &#39;center&#39;/&#39;middle&#39;.\n    left: 10,\n    // right: 10,\n    top: &#39;center&#39;,\n    // bottom: &#39;10%&#39;,\n\n    shape: {\n        // Here are configurations for shape, like `x`, `y`, `cx`, `cy`, `width`,\n        // `height`, `r`, `points`, ...\n        // Note, if `left`/`right`/`top`/`bottom` has been set, `x`/`y`/`cx`/`cy`\n        // do not work here.\n    },\n\n    style: {\n        // Here are configurations for style of the element, like `fill`, `stroke`,\n        // `lineWidth`, `shadowBlur`, ...\n    },\n\n    // z value of the elements.\n    z: 10,\n    // Whether response to mouse events / touch events.\n    silent: true,\n    // Whether the element is visible.\n    invisible: false,\n    // Used to specify whether the entire transformed element (containing children if is group)\n    // is confined in its container. Optional values: &#39;raw&#39;, &#39;all&#39;.\n    bounding: &#39;raw&#39;,\n    // Can be dragged or not.\n    draggable: false,\n    // Event handler, can also be onmousemove, ondrag, ... (listed below)\n    onclick: function () {...}\n}\n</code></pre>\n<p><strong>Event Handlers of Graphic Element</strong></p>\n<p>These events are supported:\n<code class="codespan">onclick</code>, <code class="codespan">onmouseover</code>, <code class="codespan">onmouseout</code>, <code class="codespan">onmousemove</code>, <code class="codespan">onmousewheel</code>, <code class="codespan">onmousedown</code>, <code class="codespan">onmouseup</code>, <code class="codespan">ondrag</code>, <code class="codespan">ondragstart</code>, <code class="codespan">ondragend</code>, <code class="codespan">ondragenter</code>, <code class="codespan">ondragleave</code>, <code class="codespan">ondragover</code>, <code class="codespan">ondrop</code>.</p>\n<p><strong>Hierarchy of Graphic Elements</strong></p>\n<p>Only <code class="codespan">group</code> element has children, which enable a group of elements to be positioned and transformed together.</p>\n<p><strong>Shape Configuration of Graphic Element</strong></p>\n<p>Elements with different types have different shape setting repectively. For example:</p>\n<pre><code class="lang-javascript">{\n    type: &#39;rect&#39;,\n    shape: {\n        x: 10,\n        y: 10,\n        width: 100,\n        height: 200\n    }\n},\n{\n    type: &#39;circle&#39;,\n    shape: {\n        cx: 20,\n        cy: 30,\n        r: 100\n    }\n},\n{\n    type: &#39;image&#39;,\n    style: {\n        image: &#39;http://example.website/a.png&#39;,\n        x: 100,\n        y: 200,\n        width: 230,\n        height: 400\n    }\n},\n{\n    type: &#39;text&#39;,\n    style: {\n        text: &#39;This text&#39;,\n        x: 100,\n        y: 200\n    }\n\n}\n</code></pre>\n<p><strong>Transforming and Absolutely Positioning of Graphic Element</strong></p>\n<p>Element can be transformed (translation, rotation, scale). See <a href="#graphic.elements.position">position</a>, <a href="#graphic.elements.rotation">rotation</a>, <a href="#graphic.elements.scale">scale</a>, <a href="#graphic.elements.origin">origin</a></p>\n<p>For example:</p>\n<pre><code class="lang-javascript">{\n    type: &#39;rect&#39;, // or any other types.\n\n    // Translation, using [0, 0] by default.\n    position: [100, 200],\n\n    // Scale, using [1, 1] by default.\n    scale: [2, 4],\n\n    // Rotation, using 0 by default. Negative value means rotating clockwise.\n    rotation: Math.PI / 4,\n\n    // Origin point of rotation and scale, using [0, 0] by default.\n    origin: [10, 20],\n\n    shape: {\n        // ...\n    }\n}\n</code></pre>\n<p>Each element is transformed in the coordinate system of its parent, namely, transform of a element and its parent can be &quot;stacked&quot;.</p>\n<p>Transformation is performed by this order:</p>\n<ol>\n<li>Translate [-el.origin[0], -el.origin[1]].</li>\n<li>Scale according to el.scale.</li>\n<li>Rotate according to el.rotation.</li>\n<li>Translate back according to el.origin.</li>\n<li>Translate according to el.position.</li>\n</ol>\n<p>Namely, scaling and rotating firstly, and then translate. By this mechanism, translation does not affect origin of scale and rotation.</p>\n<p><strong>Relatively Positioning</strong></p>\n<p>In real application, size of a container is always not fixed. So mechanism of relative position is required. In <code class="codespan">graphic</code> component, <a href="#graphic.elements.left">left</a> / <a href="#graphic.elements.right">right</a> / <a href="#graphic.elements.top">top</a> / <a href="#graphic.elements.bottom">bottom</a> / <a href="#graphic.elements.width">width</a> / <a href="#graphic.elements.height">height</a> are used to position element relatively.</p>\n<p>For example:</p>\n<pre><code class="lang-javascript">{ // Position the image at the bottom center of its container.\n    type: &#39;image&#39;,\n    left: &#39;center&#39;, // Position at the center horizontally.\n    bottom: &#39;10%&#39;,  // Position beyond the bottom boundary 10%.\n    style: {\n        image: &#39;http://example.website/a.png&#39;,\n        width: 45,\n        height: 45\n    }\n},\n{ // Position the entire rotated group at the right-bottom corner of its container.\n    type: &#39;group&#39;,\n    right: 0,  // Position at the right boundary.\n    bottom: 0, // Position at the bottom boundary.\n    rotation: Math.PI / 4,\n    children: [\n        {\n            type: &#39;rect&#39;,\n            left: &#39;center&#39;, // Position at horizontal center according to its parent.\n            top: &#39;middle&#39;,  // Position at vertical center according to its parent.\n            shape: {\n                width: 190,\n                height: 90\n            },\n            style: {\n                fill: &#39;#fff&#39;,\n                stroke: &#39;#999&#39;,\n                lineWidth: 2,\n                shadowBlur: 8,\n                shadowOffsetX: 3,\n                shadowOffsetY: 3,\n                shadowColor: &#39;rgba(0,0,0,0.3)&#39;\n            }\n        },\n        {\n            type: &#39;text&#39;,\n            left: &#39;center&#39;, // Position at horizontal center according to its parent.\n            top: &#39;middle&#39;,  // Position at vertical center according to its parent.\n            style: {\n                fill: &#39;#777&#39;,\n                text: [\n                    &#39;This is text&#39;,\n                    &#39;This is text&#39;,\n                    &#39;Print some text&#39;\n                ].join(&#39;\\n&#39;),\n                font: &#39;14px Microsoft YaHei&#39;\n            }\n        }\n    ]\n}\n</code></pre>\n<p>Note, <a href="graphic.elements.bounding" target="_blank">bounding</a> can be used to specify whether the entire transformed element (containing children if is group) is confined in its container.</p>\n',
    )
    calendar: Optional[Calendar] = Field(
        None,
        description='<p>Calendar coordinates.</p>\n<p>In ECharts, we are very creative to achieve the calendar chart, by using the calendar coordinates to achieve the calendar chart,\nas shown in the following example, we can use calendar coordinates in heatmap, scatter, effectScatter, and graph.</p>\n<p>Example of using heatmap in calendar coordinates:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=calendar-heatmap&edit=1&reset=1" width="800" height="400"></iframe>\n\n\n<p>Example of using effectScatter in calendar coordinates:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=calendar-effectscatter&edit=1&reset=1" width="800" height="600"></iframe>\n\n\n<p>Example of using graph in calendar coordinates:</p>\n<iframe  data-src="http://localhost/echarts-website/examples/en/view.html?c=calendar-graph&edit=1&reset=1" width="600" height="600"></iframe>\n\n\n<p>By combining calendar coordinate system and charts, you may be able to create more wonderful effects.</p>\n<p><a href="http://localhost/echarts-website/examples/en/editor.html?c=calendar-lunar&amp;edit=1&amp;reset=1" target="_blank">Display Text in Calendar</a>,\n<a href="http://localhost/echarts-website/examples/en/editor.html?c=calendar-pie&amp;edit=1&amp;reset=1" target="_blank">Display Pies in Calendar</a></p>\n<hr>\n<p><strong>Calendar layout</strong></p>\n<p>Calendar coordinate system can be placed horizontally or vertically. By convention, the heatmap calendar is horizontal. But if we need bigger cell size in other cases, the total width may be too wide. So <a href="#calendar.orient">calendar.orient</a> can help in this case.</p>\n<hr>\n<p><strong>Adapt to container size</strong></p>\n<p>Calendar coordinate system can be configured to adapt to container size, which is useful when page size is not sure. First of all, like other components, those location and size configurations can be specified on canlendar: <a href="#calendar.left">left</a> <a href="#calendar.right">right</a> <a href="#calendar.top">top</a> <a href="bottom" target="_blank">bottom</a> <a href="#calendar.width">width</a> <a href="#calendar.height">height</a>, which make calendar possible to modify its size according to container size. Besides, <a href="#calendar.cellSize">cellSize</a> can be specified to fix the size of each cell of calendar.</p>\n<hr>\n',
    )
    dataset: Optional[Union[List[Dataset], Dataset]] = Field(
        None,
        description='<p><code class="codespan">dataset</code> component is published since ECharts 4. <code class="codespan">dataset</code> brings convenience in data management separated with styles and enables data reuse by different series. More importantly, it enables data encoding from data to visual, which brings convenience in some scenarios.</p>\n<p>More details about <code class="codespan">dataset</code> can be checked in the <a href="http://localhost/echarts-website/handbook/en/concepts/dataset/" target="_blank">tutorial</a>.</p>\n',
    )
    aria: Optional[Aria] = Field(
        None,
        description='<p>The W3C has developed the <a href="https://www.w3.org/WAI/intro/aria" target="_blank">WAI-ARIA</a>, the Accessible Rich Internet Applications Suite, which is dedicated to making web content and web applications accessible. Apache ECharts 4 complies with this specification by supporting the automatic generation of intelligent descriptions based on chart configuration items, allowing blind people to understand the chart content with the help of a reading device, making the chart accessible to a wider audience. In addition, Apache ECharts 5 adds support for applique textures as an auxiliary expression of color to further differentiate the data.</p>\n<p>It is turned off by default and needs to be turned on by setting <a href="#aria.enabled">aria.enabled</a> to <code class="codespan">true</code>.</p>\n',
    )
    series: Optional[
        Union[
            List[
                Union[
                    Series1,
                    Series2,
                    Series3,
                    Series4,
                    Series5,
                    Series6,
                    Series7,
                    Series8,
                    Series9,
                    Series10,
                    Series11,
                    Series12,
                    Series13,
                    Series14,
                    Series15,
                    Series16,
                    Series17,
                    Series18,
                    Series19,
                    Series20,
                    Series21,
                    Series22,
                ]
            ],
            Series23,
        ]
    ] = None
    darkMode: Optional[Dict[str, Any]] = Field(
        None,
        description='<p>To specify whether it&#39;s dark mode.</p>\n<p>ECharts will automatically detect it via <a href="#backgroundColor">backgroundColor</a> by default and adjust the text color accordingly.</p>\n<p>This option is usually used in themes.</p>\n',
    )
    color: Optional[Union[Dict[str, Any], List]] = Field(
        None,
        description='<p>The color list of palette. If no color is set in series, the colors would be adopted sequentially and circularly from this list as the colors of series.</p>\n<p>Defaults:</p>\n<pre><code class="lang-ts">[&#39;#5470c6&#39;, &#39;#91cc75&#39;, &#39;#fac858&#39;, &#39;#ee6666&#39;, &#39;#73c0de&#39;, &#39;#3ba272&#39;, &#39;#fc8452&#39;, &#39;#9a60b4&#39;, &#39;#ea7ccc&#39;]\n</code></pre>\n<p>Supported color formats.</p>\n<ul>\n<li><p>Use RGB for colors, like <code class="codespan">&#39;rgb(128, 128, 128)&#39;</code>, or RGBA if you want to add an alpha channel for opacity, like <code class="codespan">&#39;rgba(128, 128, 128, 0.5)</code>, or use hex string, like <code class="codespan">&#39;#ccc&#39;</code>.</p>\n</li>\n<li><p>Gradient Color or Pattern</p>\n<pre><code class="lang-js">// Linear gradient with first four parameters x0, y0, x2, y2, ranging from 0 - 1, corresponding to the percentage in the graphical wraparound box, if globalCoord is ``true``, then the four values are absolute pixel positions\n{\n  type: &#39;linear&#39;,\n  x: 0,\n  y: 0,\n  x2: 0,\n  y2: 1,\n  colorStops: [{\n      offset: 0, color: &#39;red&#39; // color at 0%\n  }, {\n      offset: 1, color: &#39;blue&#39; // color at 100%\n  }],\n  global: false // default is false\n}\n// Radial gradient, the first three parameters are the center x, y and radius, the values are the same as the linear gradient\n{\n  type: &#39;radial&#39;,\n  x: 0.5,\n  y: 0.5,\n  r: 0.5,\n  colorStops: [{\n      offset: 0, color: &#39;red&#39; // color at 0%\n  }, {\n      offset: 1, color: &#39;blue&#39; // color at 100%\n  }],\n  global: false // default is false\n}\n// Pattern\n{\n  image: imageDom, // supported as HTMLImageElement, HTMLCanvasElement, but not path string of SVG\n  repeat: &#39;repeat&#39; // whether to tile, can be &#39;repeat-x&#39;, &#39;repeat-y&#39;, &#39;no-repeat&#39;\n}\n</code></pre>\n</li>\n</ul>\n',
    )
    backgroundColor: Optional[Dict[str, Any]] = Field(
        None,
        description='<p>Background color. No background by default.</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',
    )
    textStyle: Optional[TextStyle54] = Field(
        None, description='<p>Global font style.</p>\n'
    )
    animation: Optional[Dict[str, Any]] = Field(
        True, description='\n\n<p>Whether to enable animation.</p>\n'
    )
    animationThreshold: Optional[Dict[str, Any]] = Field(
        2000,
        description='<p>Whether to set graphic number threshold to animation. Animation will be disabled when graphic number is larger than threshold.</p>\n',
    )
    animationDuration: Optional[Dict[str, Any]] = Field(
        1000,
        description='\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',
    )
    animationEasing: Optional[Dict[str, Any]] = Field(
        'cubicOut',
        description='\n\n<p>Easing method used for the first animation. Varied easing effects can be found at <a href="http://localhost/echarts-website/examples/en/editor.html?c=line-easing" target="_blank">easing effect example</a>.</p>\n',
    )
    animationDelay: Optional[Dict[str, Any]] = Field(
        0,
        description='<p>Delay before updating the first animation, which supports callback function for different data to have different animation effect.</p>\n<p>For example:</p>\n<pre><code class="lang-ts">animationDelay: function (idx) {\n    // delay for later data is larger\n    return idx * 100;\n}\n</code></pre>\n<p>See <a href="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    animationDurationUpdate: Optional[Dict[str, Any]] = Field(
        300,
        description='\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',
    )
    animationEasingUpdate: Optional[Dict[str, Any]] = Field(
        'cubicOut', description='\n\n<p>Easing method used for animation.</p>\n'
    )
    animationDelayUpdate: Optional[Dict[str, Any]] = Field(
        0,
        description='<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="http://localhost/echarts-website/examples/en/editor.html?c=bar-animation-delay" target="_blank">this example</a> for more information.</p>\n',
    )
    stateAnimation: Optional[StateAnimation] = Field(
        None,
        description='<p>Animation configurations of state switchment. Can be configured in each series individually.</p>\n',
    )
    blendMode: Optional[Dict[str, Any]] = Field(
        'source-over',
        description='<p>Sets the type of compositing operation to apply when drawing a new shape. See the different type: <a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation" target="_blank">https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation</a>.</p>\n<p>The default is <code class="codespan">&#39;source-over&#39;</code>. Support settings for each series.</p>\n<p><code class="codespan">&#39;lighter&#39;</code> is also a common type of compositing operation. In this mode, the area where the number of graphics is concentrated is superimposed into a high-brightness color (white). It often used to highlight the effect of the area. See example <a href="http://localhost/echarts-website/examples/en/editor.html?c=lines-airline" target="_blank">Global airline</a></p>\n',
    )
    hoverLayerThreshold: Optional[Dict[str, Any]] = Field(
        3000,
        description='<p>When the number of element of the whole chart is larger than <code class="codespan">hoverLayerThreshold</code>, a seperate hover layer is used to render hovered elements.</p>\n<p>The seperate hover layer is used to avoid re-painting the whole canvas when hovering on elements. Instead, the hovered elements are rendered in a seperate layer so that other elements don&#39;t have to be rendered again.</p>\n<p>ECharts 2 use seperate layer for all cases. But it brings some problems like the hovered elements may not covering everything else correctly, or translucent elements may not overlay correctly to each other. And it brings extra member cost due to the extra canvas and may bring burden on mobile devices. So since ECharts 3, the hover layer is not used by default. Only when the element amount is large enough will the hover layer used.</p>\n',
    )
    useUTC: Optional[Dict[str, Any]] = Field(
        False,
        description='<p>Whether to use UTC in display.</p>\n<ul>\n<li><code class="codespan">true</code>: When <code class="codespan">axis.type</code> is <code class="codespan">&#39;time&#39;</code>, ticks is determined according to UTC, and <code class="codespan">axisLabel</code> and <code class="codespan">tooltip</code> use UTC by default.</li>\n<li><code class="codespan">false</code>: When <code class="codespan">axis.type</code> is <code class="codespan">&#39;time&#39;</code>, ticks is determined according to local time, and <code class="codespan">axisLabel</code> and <code class="codespan">tooltip</code> use local time by default.</li>\n</ul>\n<p>The default value of <code class="codespan">useUTC</code> is false, for sake of considering:</p>\n<ul>\n<li>In many cases, labels should be displayed in local time (whether the time is stored in server in local time or UTC).</li>\n<li>If user uses time string (like &#39;2012-01-02&#39;) in data, it usually means local time if time zone is not specified. Time should be displayed in its original time zone by default.</li>\n</ul>\n<p>Notice: the setting only affects &quot;display time&quot;, not &quot;parse time&quot;.\nFor how time value (like <code class="codespan">1491339540396</code>, <code class="codespan">&#39;2013-01-04&#39;</code>, ...) is parsed in echarts, see <a href="#series-line.data">the time part in date</a>.</p>\n',
    )
    options: Optional[Dict[str, Any]] = Field(
        None,
        description='<p>Option array used in <a href="option.html#timeline" target="_blank">timeline</a>. Each item of this array is an echarts option (<code class="codespan">ECUnitOption</code>).</p>\n',
    )
    media: Optional[Union[List[MediaItem], Media]] = Field(
        None,
        description='<p>See <a href="tutorial.html#Responsive%20Mobile-End" target="_blank">Responsive Mobile-End</a> for details.</p>\n',
    )
