{"$schema":"https://echarts.apache.org/doc/json-schema","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code class=\"codespan\">echarts.js</code> in script tag or through <code class=\"codespan\">require(&#39;echarts&#39;)</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n    devicePixelRatio?: number,\n    renderer?: string,\n    useDirtyRect?: boolean,     // Since `5.0.0`\n    useCoarsePointer?: boolean, // Since `5.4.0`\n    pointerSize?: number,       // Since `5.4.0`\n    ssr?: boolean,              // Since `5.3.0`\n    width?: number|string,\n    height?: number|string,\n    locale?: string             // Since `5.0.0`\n}) =&gt; ECharts\n</code></pre>\n<p>Creates an ECharts instance, and returns an <a href=\"#echartsInstance\">echartsInstance</a>. You shall not initialize multiple ECharts instances on a single container.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">dom</code></p>\n<p>  Instance container, usually is a DIV element with height and width defined. It&#39;s only optional when <code class=\"codespan\">opts.ssr</code> is enabled for server-side rendering.</p>\n<p>  It can also be a <code class=\"codespan\">canvas</code> element. thus the canvas can be used somewhere else as image directly after rendering the chart. For example, canvas can be used as a texture in WebGL, which enables updating charts in real-time, as compared to using images generated with <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a>.</p>\n</li>\n<li><p><code class=\"codespan\">theme</code></p>\n<p>  Theme to be applied. This can be a configuring object of a theme, or a theme name registered through <a href=\"#echarts.registerTheme\">echarts.registerTheme</a>. See <a href=\"https://echarts.apache.org/handbook/en/concepts/style\" target=\"_blank\">Overview of Style Customization</a>.</p>\n</li>\n<li><p><code class=\"codespan\">opts</code></p>\n<p>  Optional chart configurations; which may contain:</p>\n<ul>\n<li><code class=\"codespan\">devicePixelRatio</code> Ratio of one physical pixel to the size of one device independent pixels. Browser&#39;s <code class=\"codespan\">window.devicePixelRatio</code> is used by default.</li>\n<li><code class=\"codespan\">renderer</code>  Supports <code class=\"codespan\">&#39;canvas&#39;</code> or <code class=\"codespan\">&#39;svg&#39;</code>. See <a href=\"https://echarts.apache.org/handbook/en/best-practices/canvas-vs-svg\" target=\"_blank\">Render by Canvas or SVG</a>.</li>\n<li><code class=\"codespan\">ssr</code> Whether to use server-side rendering. Only available in SVG rendering mode. When enabled, it will no longer render automatically every frame, you have to use the <a href=\"#echartsInstance.renderToSVGString\">renderToSVGString</a> method to get the rendered SVG string.</li>\n<li><code class=\"codespan\">useDirtyRect</code> Enable dirty rectangle rendering or not, <code class=\"codespan\">false</code> by default. See <a href=\"https://echarts.apache.org/handbook/en/basics/release-note/v5-feature\" target=\"_blank\">New features in ECharts 5</a>.</li>\n<li><code class=\"codespan\">useCoarsePointer</code> Whether to expand the response area when interacting with elements. <code class=\"codespan\">null</code> means enabling for mobile devices; <code class=\"codespan\">true</code> means always enabling; <code class=\"codespan\">false</code> means always disabling. See <a href=\"https://echarts.apache.org/handbook/en/how-to/interaction/coarse-pointer\" target=\"_blank\">Coarse Pointer</a> for more information.</li>\n<li><code class=\"codespan\">pointerSize</code> Size of expanded interaction size in pixels. It should be used along with <code class=\"codespan\">opts.useCoarsePointer</code>.</li>\n<li><code class=\"codespan\">width</code>  Specify width explicitly, in pixel. If setting to <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>, width of <code class=\"codespan\">dom</code> (instance container) will be used.</li>\n<li><code class=\"codespan\">height</code>  Specify height explicitly, in pixel. If setting to <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>, height of <code class=\"codespan\">dom</code> (instance container) will be used.</li>\n<li><p><code class=\"codespan\">locale</code> Specify the locale. There are two builtins: <code class=\"codespan\">&#39;ZH&#39;</code> and <code class=\"codespan\">&#39;EN&#39;</code>. Or you can use <a href=\"#echarts.registerLocale\">echarts.registerLocale</a> to register a new locale. Or supported locales can be referenced in <a href=\"https://github.com/apache/echarts/tree/release/src/i18n\" target=\"_blank\">src/i18n</a>.</p>\n<p>If no need to specify a theme, a <code class=\"codespan\">null</code> should be passed before <code class=\"codespan\">opts</code> . Example:</p>\n<pre><code class=\"lang-ts\">const chart = echarts.init(dom, null, {renderer: &#39;svg&#39;});\n</code></pre>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Note</strong></p>\n<p>If DIV is hidden, ECharts initialization tends to fail due to the lack of width and height information. In this case, you can explicitly specify <code class=\"codespan\">style.width</code> and <code class=\"codespan\">style.height</code> of DIV, or manually call <a href=\"#echartsInstance.resize\">echartsInstance.resize</a> after showing DIV.</p>\n<p>The height and width must be set via <code class=\"codespan\">opts.width</code> and <code class=\"codespan\">opts.height</code> in the server side rendering.</p>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(group:string|Array)\n</code></pre>\n<p>Connects interaction of multiple chart series.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><code class=\"codespan\">group</code>\n  Group id, or array of chart instance.</li>\n</ul>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-ts\">// set group id of each instance respectively.\nchart1.group = &#39;group1&#39;;\nchart2.group = &#39;group1&#39;;\necharts.connect(&#39;group1&#39;);\n// or incoming instance array that need to be linked.\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(group:string)\n</code></pre>\n<p>Disconnects interaction of multiple chart series. To have one single instance to be removed, you can set <code class=\"codespan\">group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">group</code></p>\n<p>  group id.</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>Destroys chart instance, after which the instance cannot be used any more.</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(target: HTMLDivElement|HTMLCanvasElement) =&gt; ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"},"use":{"type":["Function"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">5.0.1</code></p>\n</blockquote>\n<p>Use components. Used with the new tree-shaking API.</p>\n<p>NOTE: <code class=\"codespan\">echarts.use</code> must be used before <code class=\"codespan\">eharts.init</code></p>\n<pre><code class=\"lang-ts\">// Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from &#39;echarts/core&#39;;\n// Import bar charts, all with Chart suffix\nimport {\n    BarChart\n} from &#39;echarts/charts&#39;;\n// import rectangular coordinate system component, all suffixed with Component\nimport {\n    GridComponent\n} from &#39;echarts/components&#39;;\n// Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step\nimport {\n    CanvasRenderer\n} from &#39;echarts/renderers&#39;;\n\n// Register the required components\necharts.use(\n    [GridComponent, BarChart, CanvasRenderer]\n);\n</code></pre>\n<p>See <a href=\"https://echarts.apache.org/handbook/en/basics/import\" target=\"_blank\">Use ECharts with bundler and NPM</a> for more detailed explaination.</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(\n    mapName: string,\n    opt: {\n        geoJSON: Object | string;\n        specialAreas?: Object;\n    }\n)\n| (\n    mapName: string,\n    opt: {\n        svg: Object | string;\n    }\n)\n| (\n    mapName: string,\n    geoJSON: Object | string,\n    specialAreas?: Object\n)\n</code></pre>\n<p>Registers available maps. This can only be used after including <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or chart series of <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n<p>Please refer to <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a> for usage.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">mapName</code></p>\n<p>  Map name, referring to <code class=\"codespan\">map</code> value set in <a href=\"option.html#geo\" target=\"_blank\">geo</a> component or <a href=\"option.html#series-map\" target=\"_blank\">map</a>.</p>\n</li>\n<li><p><code class=\"codespan\">opt</code></p>\n<ul>\n<li><p><code class=\"codespan\">geoJSON</code> Optional. Data in GeoJson format. See <a href=\"https://geojson.org/\" target=\"_blank\">https://geojson.org/</a> for more format information. Can be a JSON string or a parsed object. This key can also be <code class=\"codespan\">geoJson</code>.</p>\n</li>\n<li><p><code class=\"codespan\">svg</code> Optional. Data in SVG format. Can be a SVG string or a parsed SVG DOM object. See more info in <a href=\"tutorial.html#SVG%20Base%20Map%20in%20Geo%20Coords%20and%20Map%20SeriesSVG%20Base%20Map\" target=\"_blank\">SVG Base Map</a>. Introduced in v5.1.0</p>\n</li>\n<li><p><code class=\"codespan\">specialAreas</code> Optional. zoomed part of a specific area in the map for better visual effect. Only work for <code class=\"codespan\">geoJSON</code>.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>For example <a href=\"https://echarts.apache.org/examples/en/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a>: </strong></p>\n<pre><code class=\"lang-ts\">echarts.registerMap(&#39;USA&#39;, usaJson, {\n    // Move Alaska to the bottom left of United States\n    Alaska: {\n        // Upper left longitude\n        left: -131,\n        // Upper left latitude\n        top: 25,\n        // Range of longitude\n        width: 15\n    },\n    // Hawaii\n    Hawaii: {\n        left: -110,\n        top: 28,\n        width: 5\n    },\n    // Puerto Rico\n    &#39;Puerto Rico&#39;: {\n        left: -76,\n        top: 26,\n        width: 2\n    }\n});\n</code></pre>\n<p>Note:</p>\n<p>If you only import the required components in your project, starting from v5.3.0 <code class=\"codespan\">registerMap</code> has to be used after the <code class=\"codespan\">MapChart</code> or <code class=\"codespan\">GeoComponent</code> is imported.</p>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(mapName: string)\n</code></pre>\n<p>Get a registered map in the following format:</p>\n<pre><code class=\"lang-ts\">{\n    // geoJSON data of the map\n    geoJSON: Object,\n    // special area, see registerMap() for more information\n    specialAreas: Object\n}\n</code></pre>\n<p>Note:</p>\n<ul>\n<li><code class=\"codespan\">geoJSON</code> can also be <code class=\"codespan\">geoJson</code>, they have the same reference.</li>\n<li>SVG registered by <code class=\"codespan\">registerMap</code> can not be obtained by this method yet.</li>\n<li>If you only import the required components in your project, starting from v5.3.0 <code class=\"codespan\">getMap</code> has to be used after the <code class=\"codespan\">MapChart</code> or <code class=\"codespan\">GeoComponent</code> is imported.</li>\n</ul>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(themeName: string, theme: Object)\n</code></pre>\n<p>Registers a theme, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>.</p>\n"},"registerLocale":{"type":["Function"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">5.0.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">(locale: string, localeCfg: Object)\n</code></pre>\n<p>Registers a locale, should be specified when <a href=\"#echarts.init\">initialize the chart instance</a>. See the format in <a href=\"https://github.com/apache/echarts/blob/release/src/i18n/langEN.ts\" target=\"_blank\">src/i18n/langEN.ts</a></p>\n"},"setPlatformAPI":{"type":["Function"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">5.3.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">(platformAPI?: {\n    createCanvas(): HTMLCanvasElement\n    measureText(text: string, font?: string): { width: number }\n    loadImage(\n        src: string,\n        onload: () =&gt; void,\n        onerror: () =&gt; void\n    ): HTMLImageElement\n}) =&gt; void\n</code></pre>\n<p>Sets the platform-related API, which may need to be provided when non-browser platforms such as NodeJS.</p>\n<ul>\n<li><code class=\"codespan\">createCanvas</code> Creates a Canvas element, mainly used for measuring text width, which is required when <code class=\"codespan\">measureText</code> is not provided.</li>\n<li><code class=\"codespan\">measureText</code> measures the width of the text. By default will use the interface provided by the Canvas element to measure the width of the text. It can be replaced with a lighter implementation.</li>\n<li><code class=\"codespan\">loadImage</code> Load image, required when using Canvas rendering mode and using URLs as images.</li>\n</ul>\n"},"graphic":{"type":["*"],"description":"<p>Util methods about graphics.</p>\n","properties":{"extendShape":{"type":["Function"],"description":"<p>Create a new shape class.</p>\n<pre><code class=\"lang-ts\">(\n    opts: Object\n) =&gt; zrender.graphic.Path\n</code></pre>\n<p>The details of the parameter <code class=\"codespan\">opts</code> can be checked in <a href=\"https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpath\" target=\"_blank\">zrender.graphic.Path</a></p>\n"},"registerShape":{"type":["Function"],"description":"<p>Register a user defined shape.</p>\n<pre><code class=\"lang-ts\">(\n    name: string,\n    ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p>The <code class=\"codespan\">ShapeClass</code> should be generated by <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a>.\nThen the shape class can be fetched by <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a>\n<code class=\"codespan\">registerShape</code> will overwrite the registered shapes, including the registered built-in shapes, if using the same <code class=\"codespan\">name</code>.\nThe registered shapes can be used in <a href=\"option.html#series-custom\" target=\"_blank\">custom series</a> and\n<a href=\"option.html#graphic\" target=\"_blank\">graphic component</a> by declaring <code class=\"codespan\">{type: name}</code>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">var MyShape = echarts.graphic.extendShape({\n    shape: {\n        x: 0,\n        y: 0,\n        width: 0,\n        height: 0\n    },\n    buildPath: function (ctx, shape) {\n        ctx.moveTo(shape.x, shape.y);\n        ctx.lineTo(shape.x + shape.width, shape.y);\n        ctx.lineTo(shape.x, shape.y + shape.height);\n        ctx.lineTo(shape.x + shape.width, shape.y + shape.height);\n        ctx.closePath();\n    }\n});\necharts.graphic.registerShape(&#39;myCustomShape&#39;, MyShape);\n\nvar option = {\n    series: {\n        type: &#39;custom&#39;,\n        coordinateSystem: &#39;none&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;myCustomShape&#39;,\n                shape: {\n                    x: api.value(0),\n                    y: api.value(1),\n                    width: api.value(2),\n                    height: api.value(3)\n                },\n                style: {\n                    fill: &#39;red&#39;\n                }\n            };\n        },\n        data: [[10, 20, 30, 40]]\n    }\n};\n</code></pre>\n"},"getShapeClass":{"type":["Function"],"description":"<p>Get the <a href=\"#echarts.graphic.registerShape\">registered</a> shape class.</p>\n<pre><code class=\"lang-ts\">(\n    name: String\n) =&gt; zrender.graphic.Path\n</code></pre>\n<p>Some built-in shapes are registered by default:\n<code class=\"codespan\">&#39;circle&#39;</code>, <code class=\"codespan\">&#39;sector&#39;</code>, <code class=\"codespan\">&#39;ring&#39;</code>, <code class=\"codespan\">&#39;polygon&#39;</code>, <code class=\"codespan\">&#39;polyline&#39;</code>, <code class=\"codespan\">&#39;rect&#39;</code>, <code class=\"codespan\">&#39;line&#39;</code>, <code class=\"codespan\">&#39;bezierCurve&#39;</code>, <code class=\"codespan\">&#39;arc&#39;</code>.</p>\n"},"clipPointsByRect":{"type":["Function"],"description":"<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-ts\">(\n    // The points to be clipped, like [[23, 44], [12, 15], ...].\n    points: Array.&lt;Array.&lt;number&gt;&gt;,\n    // The rectangular that is used to clip points.\n    rect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    }\n) =&gt; Array.&lt;Array.&lt;number&gt;&gt; // The result Points.\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>Clip the first input rectangular by the second input rectangular.</p>\n<pre><code class=\"lang-ts\">(\n    // The rectangular to be clipped.\n    targetRect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    },\n    // The rectangular that is used to clip the first  rectangular.\n    rect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    }\n) =&gt; { // The result rectangular.\n    x: number,\n    y: number,\n    width: number,\n    height: number\n}\n</code></pre>\n<p>Notice: if the rect is totally clipped, returns <code class=\"codespan\">undefined</code>.</p>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>Instance created through <a href=\"#echarts.init\">echarts.init</a>.</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>Group name to be used in chart <a href=\"#echarts.connect\">connection</a>.</p>\n"},"setOption":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: {\n    notMerge?: boolean;\n    replaceMerge?: string | string[];\n    lazyUpdate?: boolean;\n})\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code class=\"codespan\">setOption</code>. ECharts will merge new parameters and data, and then refresh chart. If <a href=\"option.html#animation\" target=\"_blank\">animation</a> is enabled, ECharts will find the difference between two groups of data and present data changes through proper animation.</p>\n<p><strong>For example: </strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/en/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>Attention: </strong> Setting configuration item using <code class=\"codespan\">addData</code> and <code class=\"codespan\">setSeries</code> of ECharts 2.x are no longer supported. <code class=\"codespan\">setOption</code> is used for all these cases in ECharts 3. Please refer to the above example.</p>\n<p><strong>Parameters</strong></p>\n<p>Usage:</p>\n<pre><code class=\"lang-ts\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>or</p>\n<pre><code class=\"lang-ts\">chart.setOption(option, {\n    notMerge: ...,\n    lazyUpdate: ...,\n    silent: ...\n});\n</code></pre>\n<p>or</p>\n<pre><code class=\"lang-ts\">chart.setOption(option, {\n    replaceMerge: [&#39;xAxis&#39;, &#39;yAxis&#39;, &#39;series&#39;]\n});\n</code></pre>\n<ul>\n<li><p><code class=\"codespan\">option</code>: <code class=\"codespan\">ECOption</code></p>\n<p>  Configuration item and data. Please refer to <a href=\"option.html\" target=\"_blank\">configuration item manual</a> for more information.</p>\n</li>\n<li><p>opts</p>\n<ul>\n<li><p><code class=\"codespan\">notMerge</code> Optional. Whether not to merge with previous <code class=\"codespan\">option</code>. <code class=\"codespan\">false</code> by default, means merge, see more details in <strong>Component Merging Modes</strong>. If <code class=\"codespan\">true</code>, all of the current components will be removed and new components will be created according to the new <code class=\"codespan\">option</code>.</p>\n</li>\n<li><p><code class=\"codespan\">replaceMerge</code> Optional. Users can specify &quot;component main types&quot; here, which are the properties under the root of the option tree in <a href=\"option.html\" target=\"_blank\">configuration item manual</a> (e.g., <code class=\"codespan\">xAxis</code>, <code class=\"codespan\">series</code>). The specified types of component will be merged in the mode &quot;replaceMerge&quot;. If users intending to remove some part of components, <code class=\"codespan\">replaceMerge</code> can be used. See more details in <strong>Component Merging Modes</strong>.</p>\n</li>\n<li><p><code class=\"codespan\">lazyUpdate</code> Opional. Whether not to update chart immediately. <code class=\"codespan\">false</code> by default, stating update chart synchronously. If <code class=\"codespan\">true</code>, the chart will be updated in the next animation frame.</p>\n</li>\n<li><p><code class=\"codespan\">silent</code> Optional. Whether not to prevent triggering events when calling <code class=\"codespan\">setOption</code>. <code class=\"codespan\">false</code> by default, stating trigger events.</p>\n</li>\n</ul>\n</li>\n</ul>\n<h4>Component Merging Modes</h4>\n\n<p>Within a specific type of components (more accurately, &quot;component main type&quot;. e.g., <code class=\"codespan\">xAxis</code>, <code class=\"codespan\">series</code>):</p>\n<ul>\n<li>If <code class=\"codespan\">opts.notMerge</code> is set as <code class=\"codespan\">true</code>, the old components will be totally removed and the new component will be created by the incoming <code class=\"codespan\">option</code>.</li>\n<li>If <code class=\"codespan\">opts.notMerge</code> is set as <code class=\"codespan\">false</code> or not specified:<ul>\n<li>If this component main type is included in <code class=\"codespan\">opts.replaceMerge</code>, these components will be merged in mode <code class=\"codespan\">Replace Merge</code>.</li>\n<li>Otherwise, these components will be merged in mode <code class=\"codespan\">Normal Merge</code>.</li>\n</ul>\n</li>\n</ul>\n<p>What is <code class=\"codespan\">Normal Merge</code> and <code class=\"codespan\">Replace Merge</code>?</p>\n<h5>Normal Merge</h5>\n\n<p>Within a specific component main type (e.g., <code class=\"codespan\">xAxis</code>, <code class=\"codespan\">series</code>), each single &quot;component description&quot; (i.e., like <code class=\"codespan\">{type: &#39;xAxis&#39;, id: &#39;xx&#39;, name: &#39;kk&#39;, ...}</code>) in the incoming <code class=\"codespan\">option</code> will be mapped and merged into the existing components one by one if possible. Otherwise create new component on the tail of the list. The detailed rule is as follows:</p>\n<ul>\n<li>For each single &quot;component description&quot; that has <code class=\"codespan\">id</code> or <code class=\"codespan\">name</code> specified in <code class=\"codespan\">option</code>, firstly find and merge to existing components that has the same <code class=\"codespan\">id</code> or <code class=\"codespan\">name</code> if possible.</li>\n<li>Then for each remaining single &quot;component description&quot;, find and merge to remaining existing components if possible.</li>\n<li>Create new components for the remaining &quot;component descriptions&quot; at the tail.</li>\n</ul>\n<p>Features:</p>\n<ul>\n<li>No existing component will be removed. Only add and update are supported in this mode.</li>\n<li>The index of component(componentIndex) will never be changed.</li>\n<li>If no <code class=\"codespan\">id</code> and <code class=\"codespan\">name</code> specified in <code class=\"codespan\">option</code> (this is a common case), components can be simply merged intuitively according to where they appear in <code class=\"codespan\">option</code>.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Existing components:\n{\n    xAxis: [\n        { id: &#39;m&#39;, interval: 5 },\n        { id: &#39;n&#39;, name: &#39;nnn&#39;, interval: 6 }\n        { id: &#39;q&#39;, interval: 7 }\n    ]\n}\n// Incoming option:\nchart.setOption({\n    xAxis: [\n        // No id given. Will be merged to the first unmatched existing component `id: &#39;q&#39;`\n        { interval: 77 },\n        // No id given. Will create new component\n        { interval: 88 },\n        // No id given but name given. Will be merged to `name: &#39;nnn&#39;`\n        { name: &#39;nnn&#39;, interval: 66 },\n        // id given. Will be merged to `id: &#39;m&#39;`.\n        { id: &#39;m&#39;, interval: 55 }\n    ]\n});\n// Result components:\n{\n    xAxis: [\n        { id: &#39;m&#39;, interval: 55 },\n        { id: &#39;n&#39;, name: &#39;nnn&#39;, interval: 66 },\n        { id: &#39;q&#39;, interval: 77 },\n        { interval: 88 }\n    ]\n}\n</code></pre>\n<h5><code class=\"codespan\">Replace Merge</code></h5>\n\n<p>Within a specific component main type (e.g., <code class=\"codespan\">xAxis</code>, <code class=\"codespan\">series</code>), only the existing components that has its <code class=\"codespan\">id</code> declared in the incoming <code class=\"codespan\">option</code> will be kept, other existing components will be removed or replaced with new created component. the detailed rule is as follows:</p>\n<ul>\n<li>Firstly Find and merge to existing components that has the same <code class=\"codespan\">id</code> in <code class=\"codespan\">option</code> if possible.</li>\n<li>Remove the remaining unmatched existing components. (In fact, set to <code class=\"codespan\">null</code> in the component list to make sure there is no change of the indices of the components that not be removed).</li>\n<li>Create new components for the remaining &quot;component descriptions&quot;, and put them on the places that have been free or appended to the tail.</li>\n</ul>\n<p>Features:</p>\n<ul>\n<li>Enable to remove some of the components, which is not supported in <code class=\"codespan\">Normal Merge</code>.</li>\n<li>The indices of the existing components will never be modified. This is to ensure that the existing references by index still works (e.g., <code class=\"codespan\">xAxisIndex: 2</code>).</li>\n<li>After replace merged, there might be some &quot;hole&quot;, that is, there is no component at some index (because the original component is removed). But this is expectable and controllable by users.</li>\n</ul>\n<p>Example:</p>\n<pre><code class=\"lang-ts\">// Existing components:\n{\n    xAxis: [\n        { id: &#39;m&#39;, interval: 5, min: 1000 },\n        { id: &#39;n&#39;, name: &#39;nnn&#39;, interval: 6, min: 1000 }\n        { id: &#39;q&#39;, interval: 7, min: 1000 }\n    ]\n}\n// Incoming option:\nchart.setOption({\n    xAxis: [\n        { interval: 111 },\n        // id given. Will be merged to the existing `id: &#39;q&#39;`.\n        { id: &#39;q&#39;, interval: 77 },\n        // id given, but can not find in the existing components.\n        { id: &#39;t&#39;, interval: 222 },\n        { interval: 333 }\n    ]\n}, { replaceMerge: &#39;xAxis&#39; });\n// Result components:\n{\n    xAxis: [\n        // The original component { id: &#39;m&#39; } has been removed\n        // and replaced to this new component. So `min: 1000` is discarded.\n        { interval: 111 },\n        // The original component { id: &#39;n&#39; } has been removed\n        // and replaced to this new component. So `min: 1000` is discarded.\n        { id: &#39;t&#39;, interval: 222 },\n        // The original component has been merged with this new component.\n        // So `min: 1000` is kept.\n        { id: &#39;q&#39;, interval: 77, min: 1000 },\n        { interval: 333 }\n    ]\n}\n</code></pre>\n<h5>Remove Component</h5>\n\n<p>There are two ways to remove components:</p>\n<ul>\n<li>Totally removal: use <code class=\"codespan\">notMerge: true</code>, all of the components will be removed.</li>\n<li>Partially removal: use <code class=\"codespan\">replaceMerge: [...]</code>, the specified types of components will be removed if no id matched. This mode is useful to keep the state (e.g., highlight / animation / selected area) of the other components while make removal.</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">() =&gt; number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">() =&gt; number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">() =&gt; HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>Gets DOM element of ECharts instance container.</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">() =&gt; Object\n</code></pre>\n<p>Gets <code class=\"codespan\">option</code> object maintained in current instance, which contains configuration item and data merged from previous <code class=\"codespan\">setOption</code> operations by users, along with user interaction states. For example, switching of legend, zooming area of data zoom, and so on. Therefore, a new instance that is exactly the same can be recovered from this option.</p>\n<p><strong>Attention: </strong>Attribute values in each component of the returned option are all in the form of an array, no matter it&#39;s single object or array of object when passed by <code class=\"codespan\">setOption</code>.\nFor example:</p>\n<pre><code class=\"lang-ts\">{\n    title: [{...}],\n    legend: [{...}],\n    grid: [{...}]\n}\n</code></pre>\n<p>Besides, the following style is <strong>not recommended</strong>:</p>\n<pre><code class=\"lang-ts\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>This is because <code class=\"codespan\">getOption</code> contains merged values which could be default values, and may overlaps future values. So, we <strong>recommend</strong> the following style when update part of configuration.</p>\n<pre><code class=\"lang-ts\">myChart.setOption({\n    visualMap: {\n        inRange: {\n            color: ...\n        }\n    }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(opts?: {\n    width?: number|string,\n    height?: number|string,\n    silent?: boolean,\n    animation?: {\n        duration?: number\n        easing?: string\n    }\n}) =&gt; ECharts\n</code></pre>\n<p>Resizes chart, which should be called manually when container size changes.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">opts</code></p>\n<p>  Optional. Which may contain:</p>\n<ul>\n<li><p><code class=\"codespan\">width</code> Specify width explicitly, in pixel. If setting to <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>, width of <code class=\"codespan\">dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code class=\"codespan\">height</code> Specify height explicitly, in pixel. If setting to <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>, height of <code class=\"codespan\">dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code class=\"codespan\">silent</code> Specify whether or not to prevent triggering events.</p>\n</li>\n<li><p><code class=\"codespan\">animation</code> Whether to apply transition animation when resize, including <code class=\"codespan\">duration</code> and <code class=\"codespan\">easing</code>, the default <code class=\"codespan\">duration</code> is 0, that is, no transition animation is applied.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong></p>\n<p>Sometimes charts may be placed in multiple tabs. Those in hidden labels may fail to initialize due to the ignorance of container width and height. So <code class=\"codespan\">resize</code> should be called manually to get the correct width and height when switching to the corresponding tabs, or specify width/heigth in <code class=\"codespan\">opts</code> explicitly.</p>\n"},"renderToSVGString":{"type":["Function"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">5.3.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">(opts?: {\n    useViewBox?: boolean\n}) =&gt; string\n</code></pre>\n<p>Render to a SVG string. Available when setting <code class=\"codespan\">renderer: &#39;svg&#39;</code> to use SVG rendering mode.</p>\n<p>Must use this method to render if server-side rendering is enabled with the <code class=\"codespan\">ssr</code> parameter in <code class=\"codespan\">echarts.init</code></p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">opts</code></p>\n<ul>\n<li><code class=\"codespan\">useViewBox</code> Whether to add <a href=\"https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox\" target=\"_blank\">viewBox</a> in the generated SVG string</li>\n</ul>\n</li>\n</ul>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code class=\"codespan\">legendToggleSelect</code>,zoom data area <code class=\"codespan\">dataZoom</code>, show tooltip <code class=\"codespan\">showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code class=\"codespan\">payload</code> parameter can trigger multiple actions through <code class=\"codespan\">batch</code> attribute.</p>\n<p><strong>Attention: </strong>In ECharts 2.x, triggering chart actions has a long operation path like <code class=\"codespan\">myChart.component.tooltip.showTip</code>, which may also involve with internal component organization. So, <code class=\"codespan\">dispatchAction</code> is used in this case in ECharts 3.</p>\n<p><strong>For example</strong></p>\n<pre><code class=\"lang-ts\">myChart.dispatchAction({\n    type: &#39;dataZoom&#39;,\n    start: 20,\n    end: 30\n});\n// Multiply actions can be dispatched through batch parameter\nmyChart.dispatchAction({\n    type: &#39;dataZoom&#39;,\n    batch: [{\n        // first dataZoom component\n        start: 20,\n        end: 30\n    }, {\n        // second dataZoom component\n        dataZoomIndex: 1,\n        start: 10,\n        end: 20\n    }]\n})\n</code></pre>\n"},"on":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(\n    eventName: string,\n    handler: Function,\n    context?: Object\n)\n(\n    eventName: string,\n    query: string|Object,\n    handler: Function,\n    context?: Object\n)\n</code></pre>\n<p>Binds event-handling function.</p>\n<p>There are two kinds of events in ECharts, one of which is mouse events, which will be triggered when the mouse clicks certain element in the chart, the other kind will be triggered after <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> is called. Every action has a corresponding event. Please refer to <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p>If event is triggered externally by <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>, and there is batch attribute in action to trigger batch action, then the corresponding response event parameters be in batch.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code class=\"codespan\">eventName</code></p>\n<p>  Event names are all in lower-cases, for example, <code class=\"codespan\">&#39;click&#39;</code>, <code class=\"codespan\">&#39;mousemove&#39;</code>, <code class=\"codespan\">&#39;legendselected&#39;</code></p>\n<p>  <strong>Attention: </strong> ECharts 2.x uses attributes like <code class=\"codespan\">CLICK</code> in <code class=\"codespan\">config</code> object as event name. In ECharts 3, lower-case strings are used as event name to align with DOM events.</p>\n</li>\n<li><p><code class=\"codespan\">query</code></p>\n<p>  Condition for filtering, optional. <code class=\"codespan\">query</code> enables only call handlers on graphic elements of specified components. Can be <code class=\"codespan\">string</code> or <code class=\"codespan\">Object</code>.</p>\n<p>  If <code class=\"codespan\">string</code>, the formatter can be &#39;mainType&#39; or &#39;mainType.subType&#39;. For example:</p>\n<pre><code class=\"lang-ts\">  chart.on(&#39;click&#39;, &#39;series&#39;, function () {...});\n  chart.on(&#39;click&#39;, &#39;series.line&#39;, function () {...});\n  chart.on(&#39;click&#39;, &#39;xAxis.category&#39;, function () {...});\n</code></pre>\n<p>  If <code class=\"codespan\">Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-ts\">  {\n      &lt;mainType&gt;Index: number // component index\n      &lt;mainType&gt;Name: string // component name\n      &lt;mainType&gt;Id: string // component id\n      dataIndex: number // data item index\n      name: string // data item name\n      dataType: string // data item type, e.g.,\n                       // &#39;node&#39; and &#39;edge&#39; in graph.\n      element: string // element name in custom series\n  }\n</code></pre>\n<p>  For example:</p>\n<pre><code class=\"lang-ts\">  chart.setOption({\n      // ...\n      series: [{\n          name: &#39;uuu&#39;\n          // ...\n      }]\n  });\n  chart.on(&#39;mouseover&#39;, {seriesName: &#39;uuu&#39;}, function () {\n      // When the graphic elements in the series with name &#39;uuu&#39; mouse overed, this method is called.\n  });\n</code></pre>\n<p>  For example:</p>\n<pre><code class=\"lang-ts\">  chart.setOption({\n      // ...\n      series: [{\n          // ...\n      }, {\n          // ...\n          data: [\n              {name: &#39;xx&#39;, value: 121},\n              {name: &#39;yy&#39;, value: 33}\n          ]\n      }]\n  });\n  chart.on(&#39;mouseover&#39;, {seriesIndex: 1, name: &#39;xx&#39;}, function () {\n      // When the graphic elements of the data item with name &#39;xx&#39; in the series with index 1 mouse overed, this method is called.\n  });\n</code></pre>\n<p>  For example:</p>\n<pre><code class=\"lang-ts\">  chart.setOption({\n      // ...\n      series: [{\n          type: &#39;graph&#39;,\n          nodes: [{name: &#39;a&#39;, value: 10}, {name: &#39;b&#39;, value: 20}],\n          edges: [{source: 0, target: 1}]\n      }]\n  });\n  chart.on(&#39;click&#39;, {dataType: &#39;node&#39;}, function () {\n      // When the nodes of the graph clicked, this method is called.\n  });\n  chart.on(&#39;click&#39;, {dataType: &#39;edge&#39;}, function () {\n      // When the edges of the graph clicked, this method is called.\n  });\n</code></pre>\n<p>  For example:</p>\n<pre><code class=\"lang-ts\">  chart.setOption({\n      // ...\n      series: {\n          // ...\n          type: &#39;custom&#39;,\n          renderItem: function (params, api) {\n              return {\n                  type: &#39;group&#39;,\n                  children: [{\n                      type: &#39;circle&#39;,\n                      name: &#39;my_el&#39;,\n                      // ...\n                  }, {\n                      // ...\n                  }]\n              }\n          },\n          data: [[12, 33]]\n      }\n  })\n  chart.on(&#39;click&#39;, {targetName: &#39;my_el&#39;}, function () {\n      // When the element with name &#39;my_el&#39; clicked, this method is called.\n  });\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">handler</code></p>\n<p>  Event-handling function, whose format is as following:</p>\n<pre><code class=\"lang-ts\">(event: Object)\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">context</code></p>\n<p>  Optional; context of callback function, what <code class=\"codespan\">this</code> refers to.</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(eventName: string, handler?: Function)\n</code></pre>\n<p>Unbind event-handler function.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">eventName</code></p>\n<p>  Event name.</p>\n</li>\n<li><p><code class=\"codespan\">handler</code></p>\n<p>  Optional. The function to be unbound could be passed. Otherwise, all event functions of this type will be unbound.</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(\n    // finder is used to indicate in which coordinate system conversion is performed.\n    // Generally, index or id or name can be used to specify coordinate system.\n    finder: {\n        seriesIndex?: number,\n        seriesId?: string,\n        seriesName?: string,\n        geoIndex?: number,\n        geoId?: string,\n        geoName?: string,\n        xAxisIndex?: number,\n        xAxisId?: string,\n        xAxisName?: string,\n        yAxisIndex?: number,\n        yAxisId?: string,\n        yAxisName?: string,\n        gridIndex?: number,\n        gridId?: string,\n        gridName?: string\n    },\n    // The value to be converted.\n    value: Array|string\n    // Conversion result, in pixel coordinate system, where the origin ([0, 0])\n    // is on the left-top of the main dom of echarts instance.\n) =&gt; Array|string\n</code></pre>\n<p>Convert a point from logical coordinate (e.g., in geo, cartesian, graph, ...) to pixel coordinate.</p>\n<p>For example:</p>\n<p>In <a href=\"option.html#geo\" target=\"_blank\">geo</a> coordinate system, convert a point from latlong to pixel coordinate:</p>\n<pre><code class=\"lang-ts\">// [128.3324, 89.5344] represents [longitude, latitude].\n// Perform conversion in the first geo coordinate system:\nchart.convertToPixel(&#39;geo&#39;, [128.3324, 89.5344]); // The parameter &#39;geo&#39; means {geoIndex: 0}.\n// Perform conversion in the second geo coordinate system:\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// Perform conversion in the geo coordinate system with id &#39;bb&#39;:\nchart.convertToPixel({geoId: &#39;bb&#39;}, [128.3324, 89.5344]);\n</code></pre>\n<p>In cartesian (see <a href=\"option.html#grid\" target=\"_blank\">grid</a>), convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-ts\">// [300, 900] means [value on xAxis, value on yAxis].\n// Notice, there might be more than one xAxis or yAxis in a grid, and each a pair of\n// xAxis-yAxis constitudes a cartesian.\n// Perform conversion in the cartesian consist of the third xAxis and the yAxis with id &#39;y1&#39;.\nchart.convertToPixel({xAxisIndex: 2, yAxisId: &#39;y1&#39;}, [300, 900]);\n// 使用 id 为 &#39;g1&#39; 的 grid 的第一个 cartesian 进行转换：\n// Perform conversion in the first cartesian of the grid with id &#39;g1&#39;.\nchart.convertToPixel({gridId: &#39;g1&#39;}, [300, 900]);\n</code></pre>\n<p>Convert a axis value to pixel value:</p>\n<pre><code class=\"lang-ts\">// In the xAxis with id &#39;x0&#39;, convert value 3000 to the horizontal pixel coordinate:\nchart.convertToPixel({xAxisId: &#39;x0&#39;}, 3000); // A number will be returned.\n// In the second yAxis, convert value 600 to the vertical pixel coordinate:\nchart.convertToPixel({yAxisIndex: 1}, 600); // A number will be returned.\n</code></pre>\n<p>In <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-ts\">// Since every graph series maintains a coordinate system for itself, we\n// specify the graph series in finder.\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: &#39;k2&#39;}, [100, 500]);\n</code></pre>\n<p>In a cooridinate system (cartesian, geo, graph, ...) that contains the given series, convert a point to pixel coordinate:</p>\n<pre><code class=\"lang-ts\">// Perform convert in the coordinate system that contains the first series.\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// Perform convert in the coordinate system that contains the series with id &#39;k2&#39;.\nchart.convertToPixel({seriesId: &#39;k2&#39;}, [128.3324, 89.5344]);\n</code></pre>\n"},"convertFromPixel":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(\n    // finder is used to indicate in which coordinate system conversion is performed.\n    // Generally, index or id or name can be used to specify coordinate system.\n    finder: {\n        seriesIndex?: number,\n        seriesId?: string,\n        seriesName?: string,\n        geoIndex?: number,\n        geoId?: string,\n        geoName?: string,\n        xAxisIndex?: number,\n        xAxisId?: string,\n        xAxisName?: string,\n        yAxisIndex?: number,\n        yAxisId?: string,\n        yAxisName?: string,\n        gridIndex?: number,\n        gridId?: string,\n        gridName?: string\n    },\n    // The value to be converted, in pixel coordinate system, where the origin ([0, 0])\n    // is on the left-top of the main dom of echarts instance.\n    value: Array|string\n    // Conversion result\n) =&gt; Array|string\n</code></pre>\n<p>Convert a point from pixel coordinate to logical coordinate (e.g., in geo, cartesian, graph, ...). This method is the inverse operation of <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>, where the examples can be referred.</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(\n    // finder is used to specify coordinate systems or series on which the judgement performed.\n    // Generally, index or id or name can be used to specify coordinate system.\n    finder: {\n        seriesIndex?: number,\n        seriesId?: string,\n        seriesName?: string,\n        geoIndex?: number,\n        geoId?: string,\n        geoName?: string,\n        xAxisIndex?: number,\n        xAxisId?: string,\n        xAxisName?: string,\n        yAxisIndex?: number,\n        yAxisId?: string,\n        yAxisName?: string,\n        gridIndex?: number,\n        gridId?: string,\n        gridName?: string\n    },\n    // The value to be judged, in pixel coordinate system, where the origin ([0, 0])\n    // is on the left-top of the main dom of echarts instance.\n    value: Array\n) =&gt; boolean\n</code></pre>\n<p>Determine whether the given point is in the given coordinate systems or series.</p>\n<p>These coordinate systems or series are supported currently: <a href=\"option.html#grid\" target=\"_blank\">grid</a>, <a href=\"option.html#polar\" target=\"_blank\">polar</a>, <a href=\"option.html#geo\" target=\"_blank\">geo</a>, <a href=\"option.html#series-map\" target=\"_blank\">series-map</a>, <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a>, <a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a>.</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">// Determine whether point [23, 44] is in the geo whose geoIndex 0.\nchart.containPixel(&#39;geo&#39;, [23, 44]); // Parameter &#39;geo&#39; means {geoIndex: 0}\n// Determine whether point [23, 44] is in the grid whose gridId is &#39;z&#39;.\nchart.containPixel({gridId: &#39;z&#39;}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5.\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// Determine whether point [23, 44] is in series whose index are 1, 4 or 5,\n// or is in grid whose name is &#39;a&#39;.\nchart.containPixel({seriesIndex: [1, 4, 5], gridName: &#39;a&#39;}, [23, 44]);\n</code></pre>\n"},"showLoading":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(type?: string, opts?: Object)\n</code></pre>\n<p>Shows loading animation. You can call this interface manually before data is loaded, and call <a href=\"#echartsInstance.hideLoading\">hideLoading</a> to hide loading animation after data is loaded.</p>\n<p><strong>parameter: </strong></p>\n<ul>\n<li><p><code class=\"codespan\">type</code></p>\n<p>  Optional; type of loading animation; only <code class=\"codespan\">&#39;default&#39;</code> is supported by far.</p>\n</li>\n<li><p><code class=\"codespan\">opts</code></p>\n<p>  Optional; configuration item of loading animation, which is related to <code class=\"codespan\">type</code>. Following shows the available configuration items and their default values:</p>\n<pre><code class=\"lang-ts\">default: {\n  text: &#39;loading&#39;,\n  color: &#39;#c23531&#39;,\n  textColor: &#39;#000&#39;,\n  maskColor: &#39;rgba(255, 255, 255, 0.8)&#39;,\n  zlevel: 0,\n\n  // Font size. Available since `v4.8.0`.\n  fontSize: 12,\n  // Show an animated &quot;spinner&quot; or not. Available since `v4.8.0`.\n  showSpinner: true,\n  // Radius of the &quot;spinner&quot;. Available since `v4.8.0`.\n  spinnerRadius: 10,\n  // Line width of the &quot;spinner&quot;. Available since `v4.8.0`.\n  lineWidth: 5,\n  // Font thick weight. Available since `v5.0.1`.\n  fontWeight: &#39;normal&#39;,\n  // Font style. Available since `v5.0.1`.\n  fontStyle: &#39;normal&#39;,\n  // Font family. Available since `v5.0.1`.\n  fontFamily: &#39;sans-serif&#39;\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>Hides animation loading effect.</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(opts: {\n    // Exporting format, can be png, jpg, svg.\n    // NOTE: png, jpg is only available for canvas renderer. svg is only available for svg renderer.\n    type?: string,\n    // Resolution ratio of exporting image, 1 by default.\n    pixelRatio?: number,\n    // Background color of exporting image, use backgroundColor in option by default.\n    backgroundColor?: string,\n    // Excluded components list. e.g. [&#39;toolbox&#39;]\n    excludeComponents?: Array.&lt;string&gt;\n}) =&gt; string\n</code></pre>\n<p>Exports chart image; returns a base64 URL; can be set to <code class=\"codespan\">src</code> of <code class=\"codespan\">Image</code>.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-ts\">var img = new Image();\nimg.src = myChart.getDataURL({\n    pixelRatio: 2,\n    backgroundColor: &#39;#fff&#39;\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-ts\">(opts: {\n    // Exporting format, can be either png, or jpeg\n    type?: string,\n    // Resolution ratio of exporting image, 1 by default.\n    pixelRatio?: number,\n    // Background color of exporting image, use backgroundColor in option by default.\n    backgroundColor?: string,\n    // Excluded components list. e.g. [&#39;toolbox&#39;]\n    excludeComponents?: Array.&lt;string&gt;\n}) =&gt; string\n</code></pre>\n<p>Exports connected chart image; returns a base64 url; can be set to <code class=\"codespan\">src</code> of <code class=\"codespan\">Image</code>. Position of charts in exported image are related to that of the container.</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-ts\">(opts: {\n    // Specify which series the data will be appended to.\n    seriesIndex?: string,\n    // The data to be appended.\n    data?: Array|TypedArray\n}) =&gt; string\n</code></pre>\n<p>The method is used in rendering millions of data (e.g. rendering geo data). In these scenarios, the entire size of data is probably up to 10 or 100 MB, even using binary format. So chunked load data and rendering is required. When using <code class=\"codespan\">appendData</code>, the graphic elements that have been rendered will not be cleared, but keep rendering new graphic elements.</p>\n<p>Notice:</p>\n<ul>\n<li>Currently, when a series is using <code class=\"codespan\">dataset</code>, it is not supported to use <code class=\"codespan\">appendData</code>.</li>\n<li>Currently, not all types of series support incremental rendering when using <code class=\"codespan\">appendData</code>. Only these types of series support it: scatter and lines of pure echarts, and scatterGL, linesGL and polygons3D of echarts-gl.</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>Clears current instance; removes all components and series in current instance.</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-ts\">() =&gt; boolean\n</code></pre>\n<p>Returns whether current instance has been disposed.</p>\n"},"dispose":{"type":["*"],"description":"<p>Disposes instance. Once disposed, the instance can not be used again.</p>\n"}}},"action":{"type":["*"],"description":"<p>Chart actions supported by ECharts are triggered through <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>Attention: </strong> The <code class=\"codespan\">?:</code> note in the code shows that this attribute is optional. <em>EVENT:</em> stands for the event that triggers action.</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>Highlights specified data graphics.</p>\n<pre><code class=\"lang-ts\">// If highlight series:\ndispatchAction({\n    type: &#39;highlight&#39;,\n\n    // Find  by index or id or name.\n    // Can be an array to find multiple components.\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // data index; could assign by name attribute when not defined\n    dataIndex?: number | number[],\n    // optional; data name; ignored when dataIndex is defined\n    name?: string | string[],\n});\n\n// If highlight geo component (since v5.1.0):\ndispatchAction({\n    type: &#39;highlight&#39;,\n\n    // Find geo by index or id or name.\n    // Can be an array to find multiple components.\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n    // region in geo component.\n    // Can be an array to specify multiple names.\n    name?: string | string[],\n});\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>Downplay specified data graphics.</p>\n<pre><code class=\"lang-ts\">// If downplay series:\ndispatchAction({\n    type: &#39;downplay&#39;,\n\n    // Find  by index or id or name.\n    // Can be an array to find multiple components.\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // data index; could assign by name attribute when not defined\n    dataIndex?: number | number[],\n    // optional; data name; ignored when dataIndex is defined\n    name?: string | string[],\n});\n\n// If downplay geo component (since v5.1.0):\ndispatchAction({\n    type: &#39;downplay&#39;,\n\n    // Find geo by index or id or name.\n    // Can be an array to find multiple components.\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n    // region in geo component.\n    // Can be an array to specify multiple names.\n    name?: string | string[],\n});\n</code></pre>\n"},"select":{"type":["Action"],"description":"<p>Select specified data. Selected data will apply the style of <a href=\"option.html#series-bar.select\" target=\"_blank\">select</a>.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;select&#39;,\n\n    // Find  by index or id or name.\n    // Can be an array to find multiple components.\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // data index; could assign by name attribute when not defined\n    dataIndex?: number | number[],\n    // optional; data name; ignored when dataIndex is defined\n    name?: string | string[],\n})\n</code></pre>\n"},"unselect":{"type":["Action"],"description":"<p>Unselect specified data.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;unselect&#39;,\n\n    // Find  by index or id or name.\n    // Can be an array to find multiple components.\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // data index; could assign by name attribute when not defined\n    dataIndex?: number | number[],\n    // optional; data name; ignored when dataIndex is defined\n    name?: string | string[],\n})\n</code></pre>\n"},"toggleSelect":{"type":["Action"],"description":"<p>Toggle selected status of specified data.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;toggleSelect&#39;,\n\n    // Find  by index or id or name.\n    // Can be an array to find multiple components.\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // data index; could assign by name attribute when not defined\n    dataIndex?: number | number[],\n    // optional; data name; ignored when dataIndex is defined\n    name?: string | string[],\n})\n</code></pre>\n"},"legend":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, <a href=\"option.html#legend\" target=\"_blank\">legend component</a> should be imported before use.</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>Selects legend.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;legendSelect&#39;,\n    // legend name\n    name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselected\">legendselected</a></p>\n"},"legendUnSelect":{"type":["Action"],"description":"<p>Unselects the legend.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;legendUnSelect&#39;,\n    // legend name\n    name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendunselected\">legendunselected</a></p>\n"},"legendToggleSelect":{"type":["Action"],"description":"<p>Toggles legend selecting state.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;legendToggleSelect&#39;,\n    // legend name\n    name: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectchanged\">legendselectchanged</a></p>\n"},"legendAllSelect":{"type":["Action"],"description":"<p>Selects all legends.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;legendAllSelect&#39;\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectall\">legendselectall</a></p>\n"},"legendInverseSelect":{"type":["Action"],"description":"<p>Inverses all legends.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;legendInverseSelect&#39;\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendinverseselect\">legendinverseselect</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>Control the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code class=\"codespan\">&#39;scroll&#39;</code>.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;legendScroll&#39;,\n    scrollDataIndex: number,\n    legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n"}}},"tooltip":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> should be imported before use.</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>Shows tooltip.</p>\n<p>There are several usages as followed.</p>\n<p>1 Display tooltip at certain position relative to container. If it cannot be displayed at the specified location, then it is invalid.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // x coordinate on screen\n    x: number,\n    // y coordinate on screen\n    y: number,\n    // Position of tooltip. Only works in this action.\n    // Use tooltip.position in option by default.\n    position: number[] | string | Function,\n})\n</code></pre>\n<p>2 Specify graphic element in series, and display tooltip according to the tooltip configuration.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // index of series, which is optional when trigger of tooltip is axis\n    seriesIndex?: number,\n    // data index; could assign by name attribute when not defined\n    dataIndex?: number,\n    // optional; data name; ignored when dataIndex is defined\n    name?: string,,\n    // Position of tooltip. Only works in this action.\n    // Use tooltip.position in option by default.\n    position: number[] | string | Function,\n})\n</code></pre>\n<p>3 Specify graphic element in geo component, and display tooltip according to the tooltip configuration.</p>\n<blockquote>\n<p>Since <code class=\"codespan\">v5.1.0</code></p>\n</blockquote>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // Find geo by index or id or name.\n    // Can be an array to find multiple components.\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n    // region name in geo component.\n    name?: string,\n    // Position of tooltip. Only works in this action.\n    // Use tooltip.position in option by default.\n    position: number[] | string | Function\n})\n</code></pre>\n<p>Parameter <code class=\"codespan\">position</code> is the same as <a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>.</p>\n"},"hideTip":{"type":["Action"],"description":"<p>Hides tooltip.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;hideTip&#39;\n})\n</code></pre>\n"}}},"dataZoom":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> should be imported before use.</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>Zoom data region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;dataZoom&#39;,\n    // optional; index of dataZoom component; useful for are multiple dataZoom components; 0 by default\n    dataZoomIndex: number,\n    // percentage of starting position; 0 - 100\n    start: number,\n    // percentage of ending position; 0 - 100\n    end: number,\n    // data value at starting location\n    startValue: number,\n    // data value at ending location\n    endValue: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datazoom\">datazoom</a></p>\n"},"takeGlobalCursor":{"type":["Action"],"description":"<p>Activate or inactivate <code class=\"codespan\">dataZoom</code> buttom in <code class=\"codespan\">toolbox</code>.</p>\n<pre><code class=\"lang-ts\">myChart.dispatchAction({\n    type: &#39;takeGlobalCursor&#39;,\n    key: &#39;dataZoomSelect&#39;,\n    // Activate or inactivate.\n    dataZoomSelectActive: true\n});\n</code></pre>\n"}}},"visualMap":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> should be imported before use.</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;selectDataRange&#39;,\n    // optional; index of visualMap component; useful for are multiple visualMap components; 0 by default\n    visualMapIndex: number,\n    // continuous visualMap is different from discrete one\n    // continuous visualMap is an array representing range of data values.\n    // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n    selected: Object|Array\n})\n</code></pre>\n<p>?\n<strong>For example: </strong></p>\n<pre><code class=\"lang-ts\">myChart.dispatchAction({\n    type: &#39;selectDataRange&#39;,\n    // select a value range between 20 and 40\n    selected: [20, 40],\n    // cancel selecting the second range\n    selected: { 1: false },\n    // cancel selecting `excellent` category\n    selected: { &#39;excellent&#39;: false }\n});\n\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n"}}},"timeline":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> should be imported before use.</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>Sets the current time point.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;timelineChange&#39;,\n    // index of time point\n    currentIndex: number\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelinechanged\">timelinechanged</a></p>\n"},"timelinePlayChange":{"type":["Action"],"description":"<p>Toggles playing status of timeline.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;timelinePlayChange&#39;,\n    // laying status; true for auto-play\n    playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n"}}},"toolbox":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> should be imported before use.</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>Resets option.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;restore&#39;\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a></p>\n"}}},"geo":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#geo\" target=\"_blank\">geo</a> component, <a href=\"option.html#geo\" target=\"_blank\">geo</a> should be imported before use.</p>\n","properties":{"geoSelect":{"type":["Action"],"description":"<p>Selects the specified geo region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;geoSelect&#39;,\n\n    // Find geo by index or id or name.\n    // Can be an array to find multiple components.\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n\n    // region name in geo component.\n    name?: string,\n\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geoselected\">geoselected</a></p>\n"},"geoUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified geo region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;geoUnSelect&#39;,\n\n    // Find geo by index or id or name.\n    // Can be an array to find multiple components.\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n\n    // region name in geo component.\n    name?: string,\n\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geounselected\">geounselected</a></p>\n"},"geoToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified geo region.</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;geoToggleSelect&#39;,\n\n    // Find geo by index or id or name.\n    // Can be an array to find multiple components.\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n\n    // region name in geo component.\n    name?: string,\n\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geoselectchanged\">geoselectchanged</a></p>\n"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">brush</a> related actions.</p>\n","properties":{"brush":{"type":["*"],"description":"<p>This action is dispatched when the &quot;brush&quot; behavior is performing.\nIt sets select-boxes (areas) in this chart. For example:</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n    type: &#39;brush&#39;,\n    areas: [ // &quot;areas&quot; means select-boxes. Multi-boxes can be specified.\n             // If &quot;areas&quot; is empty, all of the select-boxes will be deleted.\n        { // The first area.\n\n            // Indicate that this area is a &quot;coodinate system area&quot;, belonging\n            // to a geo coordinate system with getIndex: 0.\n            // We can also use xAxisIndex or yAxisIndex to indicate that\n            // this area belongs to a catesian coodinate system.\n            // If no coordinate system is specified, this area is a\n            // &quot;global area&quot;, which does not belong to any coordinate system.\n            // If an area belongs to a coordinate system, this area moves\n            // and scales alone with the coordinate system.\n            geoIndex: 0,\n            // xAxisIndex: 0,\n            // yAxisIndex: 0,\n\n            // Optional: &#39;polygon&#39;, &#39;rect&#39;, &#39;lineX&#39;, &#39;lineY&#39;\n            brushType: &#39;polygon&#39;,\n\n            // Only for &quot;global area&quot;, define the area with the pixel coordinates.\n            range: [\n                ...\n            ],\n\n            // Only for &quot;coordinate system area&quot;, define the area with the\n            // coordinates.\n            coordRange: [\n                // In this case, the area is in a geo coordinate system, so\n                // this is [longitude, latitude].\n                [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n            ]\n        },\n        ... // Other areas.\n    ]\n});\n</code></pre>\n<p>The content of <code class=\"codespan\">range</code> and <code class=\"codespan\">coordRange</code> can be:</p>\n<ul>\n<li>If <code class=\"codespan\">brushType</code> is &#39;rect&#39;:\n  <code class=\"codespan\">range</code> and <code class=\"codespan\">coordRange</code> is: <code class=\"codespan\">[[minX, maxX], [minY, maxY]]</code></li>\n<li>If <code class=\"codespan\">brushType</code> is &#39;lineX&#39; or &#39;lineY&#39;:\n  <code class=\"codespan\">range</code> and <code class=\"codespan\">coordRange</code> is: [min, maxX]</li>\n<li>If <code class=\"codespan\">brushType</code> is &#39;polygon&#39;:\n  <code class=\"codespan\">range</code> and <code class=\"codespan\">coordRange</code> is: [[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p>The difference between <code class=\"codespan\">range</code> and <code class=\"codespan\">coordRange</code> is:</p>\n<ul>\n<li>If the area is &quot;global area&quot;, we should use <code class=\"codespan\">range</code>.</li>\n<li>If the area is &quot;coordinate system area&quot; (i.e., <code class=\"codespan\">geoIndex</code> or <code class=\"codespan\">xAxisIndex</code> or <code class=\"codespan\">yAxisIndex</code> is specified), we should use <code class=\"codespan\">coordRange</code>.</li>\n<li>The unit of <code class=\"codespan\">range</code> is &quot;pixel&quot;, while the unit of <code class=\"codespan\">coordRange</code> should be the save as the unit of the coordinate system. For example, in geo coordinate system, <code class=\"codespan\">coordRange</code> should be [<code class=\"codespan\">longitude</code>, <code class=\"codespan\">latitude</code>], and in cartesian, it should be [<code class=\"codespan\">axis A value</code>, <code class=\"codespan\">axis B value</code>, <code class=\"codespan\">axis C value</code>, ...].</li>\n</ul>\n"},"brushEnd":{"type":["*"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>This action is dispatched when the &quot;brush&quot; behavior finished.\nThe parameters are the same as <a href=\"#action.brush.brush\">action brush</a>.</p>\n"},"takeGlobalCursor":{"type":["*"],"description":"<p>The switch of the brush. This action can make the mouse enabled/disabled to brush.\nIn fact, the brush buttons in <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> just use this aciton.</p>\n<p>This event corresponding to this action is <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>.</p>\n<pre><code class=\"lang-ts\">api.dispatchAction({\n    type: &#39;takeGlobalCursor&#39;,\n    // If intending to enable brush, must set. Otherwise, the mouse will be disabled to brush.\n    key: &#39;brush&#39;,\n    brushOption: {\n        // See more info in the `brushType` of &quot;brush component&quot;.\n        // If set as `false`, the mouse is disabled to brush.\n        brushType: string,\n        // See more info in the `brushModel` of &quot;brush component&quot;.\n        // IF not set, use the `brushMode` of brush component.\n        brushMode: string\n    }\n});\n</code></pre>\n"}}}}},"events":{"type":["*"],"description":"<p>Event-handling functions are mainly added through <a href=\"#echartsInstance.on\">on</a> in ECharts. This document describes all event list in ECharts.</p>\n<p>Event in ECharts can be divided in two kinds. One is mouse event, which is triggered when mouse clicks on certain component, the other is triggered after dispatches <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a>.</p>\n<p><strong>For example:</strong></p>\n<pre><code class=\"lang-ts\">myChart.on(&#39;click&#39;, function (params) {\n    console.log(params);\n});\n\nmyChart.on(&#39;legendselectchanged&#39;, function (params) {\n    console.log(params);\n});\n\nchart.on(&#39;click&#39;, &#39;series.line&#39;, function (params) {\n    console.log(params);\n});\n\nchart.on(&#39;mouseover&#39;, {seriesIndex: 1, name: &#39;xx&#39;}, function (params) {\n    console.log(params);\n});\n</code></pre>\n<p>See <a href=\"#echartsInstance.on\">on</a> for more detailed info.</p>\n","properties":{"Mouse events":{"type":["*"],"description":"<p>Event parameters of mouse events are attributes of event object. The following shows basic parameters for chart click events. Other charts, like pie charts, may have additional parameters like <code class=\"codespan\">percent</code>. Please refer to callback <code class=\"codespan\">params</code> of each chart&#39;s label formatter.</p>\n<pre><code class=\"lang-ts\">{\n    // type of the component to which the clicked glyph belongs\n    // i.e., &#39;series&#39;, &#39;markLine&#39;, &#39;markPoint&#39;, &#39;timeLine&#39;\n    componentType: string,\n    // series type (make sense when componentType is &#39;series&#39;)\n    // i.e., &#39;line&#39;, &#39;bar&#39;, &#39;pie&#39;\n    seriesType: string,\n    // series index in incoming option.series (make sense when componentType is &#39;series&#39;)\n    seriesIndex: number,\n    // series name (make sense when componentType is &#39;series&#39;)\n    seriesName: string,\n    // data name, category name\n    name: string,\n    // data index in incoming data array\n    dataIndex: number,\n    // incoming rwa data item\n    data: Object,\n    // Some series, such as sankey or graph, maintains more than\n    // one types of data (nodeData and edgeData), which can be\n    // distinguished from each other by dataType with its value\n    // &#39;node&#39; and &#39;edge&#39;.\n    // On the other hand, most series has only one type of data,\n    // where dataType is not needed.\n    dataType: string,\n    // incoming data value\n    value: number|Array,\n    // color of component (make sense when componentType is &#39;series&#39;)\n    color: string,\n    // User info (only available in graphic component\n    // and custom series, if element option has info\n    // property, e.g., {type: &#39;circle&#39;, info: {some: 123}})\n    info: *\n}\n</code></pre>\n<p>Mouse events contain <code class=\"codespan\">&#39;click&#39;</code>, <code class=\"codespan\">&#39;dblclick&#39;</code>, <code class=\"codespan\">&#39;mousedown&#39;</code>, <code class=\"codespan\">&#39;mousemove&#39;</code>, <code class=\"codespan\">&#39;mouseup&#39;</code>, <code class=\"codespan\">&#39;mouseover&#39;</code>, <code class=\"codespan\">&#39;mouseout&#39;</code>, <code class=\"codespan\">&#39;globalout&#39;</code>, <code class=\"codespan\">&#39;contextmenu&#39;</code>.</p>\n<p>See <a href=\"tutorial.html#Events%20and%20actions%20in%20ECharts%0D\" target=\"_blank\">Events and actions in ECharts</a></p>\n","properties":{"click":{"type":["Event"],"description":""},"dblclick":{"type":["Event"],"description":""},"mousedown":{"type":["Event"],"description":""},"mousemove":{"type":["Event"],"description":""},"mouseup":{"type":["Event"],"description":""},"mouseover":{"type":["Event"],"description":""},"mouseout":{"type":["Event"],"description":""},"globalout":{"type":["Event"],"description":""},"contextmenu":{"type":["Event"],"description":""}}},"highlight":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.highlight\">highlight</a></p>\n<p>Event of data highlight.</p>\n"},"downplay":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.downplay\">downplay</a></p>\n<p>Event of data downplay.</p>\n"},"selectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toggleSelect\">toggleSelect</a>, <a href=\"#action.select\">select</a>, <a href=\"#action.unselect\">unselect</a></p>\n<p>Event emitted when data selection is changed.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;selectchanged&#39;,\n    fromAction: &#39;select&#39; | &#39;toggleSelect&#39; | &#39;unselect&#39;,\n    // Grouped by series.\n    selected: ({\n        dataIndex: number[], seriesIndex: number\n    })[]\n}\n</code></pre>\n"},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\nEvent emitted after legend selecting state changes.</p>\n<p><strong>Attention: </strong> This event will be emitted when users toggle legend button in legend component.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendselectchanged&#39;,\n    // change legend name\n    name: string\n    // table of all legend selecting states\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\nEvent emitted after legend is selected.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendselected&#39;,\n    // name of selected legend\n    name: string\n    // table of all legend selecting states\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from  <code class=\"codespan\">legendselected</code> to <a href=\"#events.legendselectchanged\">legendselectchanged</a>.</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\nEvent emitted after unselecting legend.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendunselected&#39;,\n    // name of unselected legend\n    name: string\n    // table of all legend selecting states\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n"},"legendselectall":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendAllSelect\">legendAllSelect</a>\nEvent emitted after all legends are selected.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendselectall&#39;,\n    // table of all legend selecting states\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n"},"legendinverseselect":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendInverseSelect\">legendInverseSelect</a>\nEvent emitted after inversing all legends.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendinverseselect&#39;,\n    // table of all legend selecting states\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\nEvent when trigger legend scroll.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendscroll&#39;,\n    scrollDataIndex: number\n    legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>Event emitted after zooming data area.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;datazoom&#39;,\n    // percentage of zoom start position, 0 - 100\n    start: number\n    // percentage of zoom finish position, 0 - 100\n    end: number\n    // data value of zoom start position; only exists in zoom event of triggered by toolbar\n    startValue?: number\n    // data value of zoom finish position; only exists in zoom event of triggered by toolbar\n    endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\nEvent emitted after range is changed in visualMap.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;datarangeselected&#39;,\n    // continuous visualMap is different from discrete one\n    // continuous visualMap is an array representing range of data values.\n    // discrete visualMap is an object, whose key is category or piece index; value is `true` or `false`\n    selected: Object|Array\n}\n</code></pre>\n"},"graphroam":{"type":["Event"],"description":"<p>Event emitted after <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a> is roamed.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;graphroam&#39;,\n    seriesId: string,\n    zoom: number, // zoom ratio of roaming once\n    originX: number,\n    originY: number\n}\n</code></pre>\n"},"georoam":{"type":["Event"],"description":"<p>Event emitted after <a href=\"option.html#geo\" target=\"_blank\">geo</a> is roamed.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;georoam&#39;,\n    componentType: &#39;geo&#39; | &#39;series&#39;,\n    seriesId: string,\n    zoom: number, // zoom ratio of roaming once\n    originX: number,\n    originY: number\n}\n</code></pre>\n"},"treeroam":{"type":["Event"],"description":"<p>Event emitted after <a href=\"option.html#series-tree\" target=\"_blank\">series-tree</a> is roamed.</p>\n<p><code class=\"codespan\">treeroam</code> events include two types. One is triggered by panning and the parameters are:</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;treeroam&#39;,\n    seriesId: string,\n    dx: number,\n    dy: number\n}\n</code></pre>\n<p>The other type is triggered by zooming and the parameters are:</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;treeroam&#39;,\n    seriesId: string,\n    zoom: number, // zoom ratio of roaming once\n    originX: number,\n    originY: number\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\nEvent emitted after time point in timeline is changed.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;timelinechanged&#39;,\n    // index of time point\n    currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\nSwitching event of play state in timeline.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;timelineplaychanged&#39;,\n    // play state, true for auto play\n    playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\nResets option event.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;restore&#39;\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p>Changing event of <a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">data view tool in toolbox</a>.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;dataviewchanged&#39;\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p>Switching event of <a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">magic type tool in toolbox</a>.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;magictypechanged&#39;,\n    // click to change current type; same as type attribute in echarts 2.x\n    currentType: string\n}\n</code></pre>\n"},"geoselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoToggleSelect\">geoToggleSelect</a></p>\n<p>Event emitted after  selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;geoselectchanged&#39;,\n    // series ID, can be passed in option\n    seriesId: string\n    // data name\n    name: name,\n    // list for each geo component.\n    // allSelected is supported since v5.1.0\n    allSelected: ({\n        geoIndex: number\n        // selected names of each geo component.\n        name: string[]\n    })[],\n    // (deprecated).\n    // all selected data.\n    // status of different geo components will be merged.\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code class=\"codespan\">geoSelected</code> in ECharts 2.</p>\n"},"geoselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoSelect\">geoSelect</a></p>\n<p>Event after selecting.</p>\n<p>Use <code class=\"codespan\">dispatchAction</code> can trigger this event, but user clicking this event won&#39;t trigger this (User clicking event please use <a href=\"#events.geoselectchanged\">geoselectchanged</a>).</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;geoselected&#39;,\n    // series ID, can incoming in option\n    seriesId: string\n    // data name\n    name: name,\n    // table of all legend selecting states\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code class=\"codespan\">geoselected</code> to <a href=\"#events.geoselectchanged\">geoselectchanged</a>.</p>\n"},"geounselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoUnSelect\">geoUnSelect</a></p>\n<p> cancels selected event.</p>\n<p>Use <code class=\"codespan\">dispatchAction</code> will trigger this event, but user clicking won&#39;t trigger it. (For user clicking event, please refer to <a href=\"#events.geoselectchanged\">geoselectchanged</a>).</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;geounselected&#39;,\n    // series ID, can incoming in option\n    seriesId: string\n    // data name\n    name: name,\n    // table of all legend selecting states\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p>Selecting event of range of <a href=\"option.html#parallelAxis\" target=\"_blank\">parallel axis</a>.</p>\n<p>When selecting axis range, the following method can be used to get data indices of currently highlighted lines, which is the list of indices in <code class=\"codespan\">data</code> of <code class=\"codespan\">series</code>.</p>\n<pre><code class=\"lang-javascript\">chart.on(&#39;axisareaselected&#39;, function () {\n    var series1 = chart.getModel().getSeries()[0];\n    var series2 = chart.getModel().getSeries()[0];\n    var indices1 = series1.getRawIndicesByActiveState(&#39;active&#39;);\n    var indices2 = series2.getRawIndicesByActiveState(&#39;active&#39;);\n    console.log(indices1);\n    console.log(indices2);\n});\n</code></pre>\n"},"brush":{"type":["Event"],"description":"<p>Event triggered after action <a href=\"#action.brush.brush\">brush</a> dispatched.</p>\n"},"brushEnd":{"type":["Event"],"description":"<blockquote>\n<p>Since <code class=\"codespan\">v4.5.0</code></p>\n</blockquote>\n<p>Event triggered after action <a href=\"#action.brush.brushEnd\">brushEnd</a> dispatched.</p>\n"},"brushselected":{"type":["Event"],"description":"<p>Notice what are selected.</p>\n<p>See <a href=\"option.html#brush\" target=\"_blank\">brush component</a>.</p>\n<p>This event will be triggered when <code class=\"codespan\">dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code class=\"codespan\">setOption</code>.</p>\n<p>Properties in this event.</p>\n<pre><code class=\"lang-javascript\">{\n    type: &#39;brushselected&#39;,\n    batch: [\n        {\n            // Id of the brush component. In most case, only one brush component is used, so do not care about this property.\n            brushId: string,\n            // Index of the brush component.\n            brushIndex: number,\n            // Name of the brush component.\n            brushName: string,\n\n            // The brush areas (that is, select-boxes)\n            areas: [\n                { // The first area.\n                    // `range`/`coordRange` is used to record the current\n                    // range of the area, see the definitions in &quot;brush\n                    // action&quot;.\n\n                    // If this area is &quot;glboal arae&quot; (that is, it does not\n                    // belong to any coordinate system), use `range`, where\n                    // the values are pixel.\n                    range: Array.&lt;number&gt;,\n\n                    // If the area is &quot;coordinate system area&#39;, use `coordRange`,\n                    // where the values are coordinates.\n                    coordRange: Array.&lt;number&gt;,\n                    // Specially, if the area belongs to an axis of a &quot;grid&quot; (e.g., set\n                    // `xAxisIndex: 0`), and the axis belongs to more than one cartesian\n                    // e.g., the `xAxis` corresponds to two `yAxis`), `coordRanges` is\n                    // used to record the coordinates of this area in each cartesian,\n                    // and `coordRange` is `coordRanges[0]`.\n                    coordRanges: Array.&lt;Array.&lt;number&gt;&gt;,\n                },\n                ...\n            ],\n\n            // The selected items in each series.\n            // Notice, if a series do not support `brush`, its cooresponding item still appear in this array. Namely, the index this array is the same as `seriesIndex`.\n            selected: [\n                { // The selected items in series 0.\n                    seriesIndex: number,\n                    // dataIndex can be used to find value in original data.\n                    dataIndex: [ 3, 6, 12, 23 ]\n                },\n                { // The selected items in series 0.\n                    seriesIndex: number,\n                    dataIndex: []\n                },\n                ...\n            ]\n        },\n        ...\n    ]\n}\n</code></pre>\n<p>Usage example of this event:</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n    [ 12, 23, 54, 6 ], // Data of series 0.\n    [ 34, 34433, 2223, 21122, 1232, 34 ] // Data of series 1.\n];\n\nchart.setOption({\n    ...,\n    brush: {\n        ...\n    },\n    series: [\n        { // series 0\n            data: dataBySeries[0]\n        },\n        { // series 1\n            data: dataBySeries[1]\n        }\n    ]\n});\n\nchart.on(&#39;brushSelected&#39;, function (params) {\n    var brushComponent = params.batch[0];\n\n    var sum = 0; // The sum of all selected values.\n\n    for (var sIdx = 0; sIdx &lt; brushComponent.selected.length; sIdx++) {\n        var dataIndices = brushComponent.selected[sIdx].dataIndex;\n\n        for (var i = 0; i &lt; dataIndices.length; i++) {\n            var dataIndex = dataIndices[i];\n            sum += dataBySeries[sIdx][dataIndex];\n        }\n    }\n    console.log(sum);\n});\n</code></pre>\n<p><strong>Tip: </strong>\n<a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a> can be used to avoid triggering this event too frequently.</p>\n"},"globalcursortaken":{"type":["Event"],"description":"<p>See <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>.</p>\n"},"rendered":{"type":["Event"],"description":"<p>Trigger when a frame rendered. Notice that the <code class=\"codespan\">rendered</code> event does not indicate that the animation finished (see <a href=\"option.html#animation\" target=\"_blank\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"option.html#series-scatter.progressive\" target=\"_blank\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-ts\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on(&#39;rendered&#39;, function () {\n    snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>Triggered when render finished, that is, when animation finished (see <a href=\"option.html#animation\" target=\"_blank\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"option.html#series-scatter.progressive\" target=\"_blank\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-ts\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on(&#39;finished&#39;, function () {\n    snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n<p>Note that it&#39;s recommended to register the callbacks for such an event before <code class=\"codespan\">setOption</code> in case the callbacks may not be called as expected due to the timing issue when the animation is disabled.</p>\n<pre><code class=\"lang-ts\">var option = {\n    // ...\n    animation: false\n    // ...\n};\nchart.on(&#39;finished&#39;, function () {\n    // ...  \n});\nchart.setOption(option);\n</code></pre>\n"}}}}}}