{"$schema":"http://echarts.baidu.com/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>Global echarts object, which can be accessed after including <code>echarts.js</code> in script tag or through <code>require(&#39;echarts&#39;)</code> in AMD environment.</p>\n","properties":{"init":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n    devicePixelRatio?: number\n    renderer?: string\n    width?: number|string\n    height? number|string\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>dom</code></p>\n<p>  Instance container, usually is a <code>div</code> element with height and width defined.</p>\n<p>  <strong>Attention: </strong>If <code>div</code> is hidden, ECharts initialization tends to fail due to the lack of width and height information. In this case, you can explicitly specify <code>style.width</code> and <code>style.height</code> of <code>div</code>, or manually call <a href=\"echartsInstance.resize\" target=\"_blank\">echartsInstance.resize</a> after showing <code>div</code>.</p>\n<p>  ECharts 3 supports using <code>canvas</code> element as container directly, 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>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>.</p>\n</li>\n<li><p><code>opts</code></p>\n<p>  Optional chart configurations; which may contain:</p>\n<ul>\n<li><p><code>devicePixelRatio</code></p>\n<p> Ratio of one physical pixel to the size of one device independent pixels. Browser&#39;s <code>window.devicePixelRatio</code> is used by default.</p>\n</li>\n<li><p><code>renderer</code></p>\n<p>  Supports <code>&#39;canvas&#39;</code> or <code>&#39;svg&#39;</code>. See <a href=\"https://ecomfe.github.io/echarts-doc/public/en/tutorial.html#Render%20by%20Canvas%20or%20SVG\" target=\"_blank\">Render by Canvas or SVG</a>.</p>\n</li>\n<li><p><code>width</code></p>\n<p>  Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p>  Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n</ul>\n</li>\n</ul>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(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>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-js\">// 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-js\">(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>group</code> of chart instance to be null.</p>\n<p><strong>Parameters</strong></p>\n<ul>\n<li><p><code>group</code></p>\n<p>  group id.</p>\n</li>\n</ul>\n"},"dispose":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(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-js\">(target: HTMLDivElement|HTMLCanvasElement) =&gt; ECharts\n</code></pre>\n<p>Returns chart instance of dom container.</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\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>mapName</code></p>\n<p>  Map name, referring to <code>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>geoJson</code></p>\n<p>  Data in GeoJson format. See <a href=\"http://geojson.org/\" target=\"_blank\">http://geojson.org/</a> for more format information.</p>\n</li>\n<li><p><code>specialAreas</code></p>\n<p>  Optional; zoomed part of a specific area in the map for better visual effect.</p>\n<p>  <strong>For example <a href=\"https://www.echartsjs.com/examples/en/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a>: </strong></p>\n<pre><code class=\"lang-js\">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</li>\n</ul>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string)\n</code></pre>\n<p>Get a registed map in the following format:</p>\n<pre><code class=\"lang-js\">{\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"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(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"},"graphic":{"type":["*"],"description":"<p>Util methods about graphics.</p>\n","properties":{"clipPointsByRect":{"type":["Function"],"description":"<p>Clip the given points by the given rectangular.</p>\n<pre><code class=\"lang-js\">(\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-js\">(\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>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-js\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: Object)\n</code></pre>\n<p>Configuration item, data, universal interface, all parameters and data can all be modified through <code>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://www.echartsjs.com/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>addData</code> and <code>setSeries</code> of ECharts 2.x are no longer supported. <code>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>Invoke approaches:</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>or</p>\n<pre><code class=\"lang-js\">chart.setOption(option, {\n    notMerge: ...,\n    lazyUpdate: ...,\n    silent: ...\n});\n</code></pre>\n<ul>\n<li><p><code>option</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><code>notMerge</code></p>\n<p>  Optional; states whether not to merge with previous <code>option</code>; <code>false</code> by defualt, stating merging.</p>\n</li>\n<li><p><code>lazyUpdate</code></p>\n<p>  Optional; states whether not to update chart immediately; <code>false</code> by defualt, stating update immediately.</p>\n</li>\n<li><p><code>silent</code></p>\n<p>  Optional; states whether not to prevent triggering events when calling <code>setOption</code>; <code>false</code> by defualt, stating trigger events.</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; number\n</code></pre>\n<p>Gets width of ECharts instance container.</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; number\n</code></pre>\n<p>Gets height of ECharts instance container.</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&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-js\">() =&gt; Object\n</code></pre>\n<p>Gets <code>option</code> object maintained in current instance, which contains configuration item and data merged from previous <code>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>setOption</code>.\nFor example:</p>\n<pre><code class=\"lang-js\">{\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-js\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>This is because <code>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-js\">myChart.setOption({\n    visualMap: {\n        inRange: {\n            color: ...\n        }\n    }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts?: {\n    width?: number|string,\n    height?: number|string,\n    silent?: boolean\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>opts</code></p>\n<p>  Optional; which may contain:</p>\n<ul>\n<li><p><code>width</code></p>\n<p>  Specify width explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>, width of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>height</code></p>\n<p>  Specify height explicitly, in pixel. If setting to <code>null</code>/<code>undefined</code>/<code>&#39;auto&#39;</code>, height of <code>dom</code> (instance container) will be used.</p>\n</li>\n<li><p><code>silent</code></p>\n<p>  Specify whether or not to prevent triggering events.</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> 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>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>opts</code> explicitly.</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>Triggers chart action, like chart switch <code>legendToggleSelect</code>,zoom data area <code>dataZoom</code>, show tooltip <code>showTip</code> and so on. See <a href=\"#action\">action</a> and <a href=\"#events\">events</a> for more information.</p>\n<p><code>payload</code> parameter can trigger multiple actions through <code>batch</code> attribute.</p>\n<p><strong>Attention: </strong>In ECharts 2.x, triggering chart actions has a long operation path like <code>myChart.component.tooltip.showTip</code>, which may also involve with internal component organization. So, <code>dispatchAction</code> is used in this case in ECharts 3.</p>\n<p><strong>For example</strong></p>\n<pre><code class=\"lang-js\">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-js\">(\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>eventName</code></p>\n<p>  Event names are all in lower-cases, for example, <code>&#39;click&#39;</code>, <code>&#39;mousemove&#39;</code>, <code>&#39;legendselected&#39;</code></p>\n<p>  <strong>Attention: </strong> ECharts 2.x uses attributes like <code>CLICK</code> in <code>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>query</code></p>\n<p>  Condition for filtering, optional. <code>query</code> enables only call handlers on graphic elements of specified components. Can be <code>string</code> or <code>Object</code>.</p>\n<p>  If <code>string</code>, the formatter can be &#39;mainType&#39; or &#39;mainType.subType&#39;. For example:</p>\n<pre><code class=\"lang-js\">  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;dataZoom&#39;, function () {...});\n  chart.on(&#39;click&#39;, &#39;xAxis.category&#39;, function () {...});\n</code></pre>\n<p>  If <code>Object</code>, one or more properties below can be included, and any of them is optional.</p>\n<pre><code class=\"lang-js\">  {\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-js\">  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-js\">  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-js\">  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-js\">  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>handler</code></p>\n<p>  Event-handling function, whose format is as following:</p>\n<pre><code class=\"lang-js\">(event: Object)\n</code></pre>\n</li>\n<li><p><code>context</code></p>\n<p>  Optional; context of callback function, what <code>this</code> refers to.</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(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>eventName</code></p>\n<p>  Event name.</p>\n</li>\n<li><p><code>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-js\">(\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-js\">// [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-js\">// [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-js\">// 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-js\">// 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-js\">// 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-js\">(\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-js\">(\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-js\">// 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-js\">(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>type</code></p>\n<p>  Optional; type of loading animation; only <code>&#39;default&#39;</code> is supported by far.</p>\n</li>\n<li><p><code>opts</code></p>\n<p>  Optional; configuration item of loading animation, which is related to <code>type</code>. Following shows the default configuration item :</p>\n<pre><code class=\"lang-js\">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</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-js\">(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 chart image; returns a base64 URL; can be set to <code>src</code> of <code>Image</code>.</p>\n<p><strong>For example: </strong></p>\n<pre><code class=\"lang-js\">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-js\">(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>src</code> of <code>Image</code>. Position of charts in exported image are related to that of the container.</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(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 scenario, 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>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>dataset</code>, it is not supported to use <code>appendData</code>.</li>\n<li>Currently not all types of series supported incremental rendering when using <code>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 charts in current instance. After clearing, <a href=\"#echartsInstance.getOption\">getOption</a> returns an empty object <code>{}</code>.</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() =&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>?:</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 the given graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;highlight&#39;,\n    // optional; series index; could be an array of multiple series\n    seriesIndex?: number|Array,\n    // optional; series name; could be an array of multiple series\n    seriesName?: string|Array,\n    // options are index of data\n    dataIndex?: number,\n    // options are data name\n    name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>Cancels highlighting graphic element.</p>\n<p>Series is specified through <code>seriesName</code> or <code>seriesIndex</code>. If another data needs to be specified, then use <code>dataIndex</code> or <code>name</code>.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;downplay&#39;,\n    // optional; series index; could be an array of multiple series\n    seriesIndex?: number|Array,\n    // optional; series name; could be an array of multiple series\n    seriesName?: string|Array,\n    // options are index of data\n    dataIndex?: number,\n    // options are data name\n    name?: string\n})\n</code></pre>\n<!--============= legend ==========-->\n"},"legend":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#legend\" target=\"_blank\">legend component</a>, which should include <a href=\"option.html#legend\" target=\"_blank\">legend component</a> before use.</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>Selects legend.</p>\n<pre><code class=\"lang-js\">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-js\">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-js\">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"},"legendScroll":{"type":["Action"],"description":"<p>Controll the scrolling of legend. It works when <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> is <code>&#39;scroll&#39;</code>.</p>\n<pre><code class=\"lang-js\">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 ==========-->\n"}}},"tooltip":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a>, which should include <a href=\"option.html#tooltip\" target=\"_blank\">tooltip component</a> before use.</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>Shows tooltip.</p>\n<p>There are two 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-js\">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: Array.&lt;number&gt;|string|Function\n})\n</code></pre>\n<p>2 Specify graphic element, and display tooltip according to the tooltip configuration item.</p>\n<pre><code class=\"lang-js\">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: Array.&lt;number&gt;|string|Function\n})\n</code></pre>\n<p>Parameter <code>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-js\">dispatchAction({\n    type: &#39;hideTip&#39;\n})\n</code></pre>\n<!--============= dataZoom ==========-->\n"}}},"dataZoom":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a>, which should include <a href=\"option.html#dataZoom\" target=\"_blank\">data region zoom component</a> before use.</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>Zoom data region.</p>\n<pre><code class=\"lang-js\">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>dataZoom</code> buttom in <code>toolbox</code>.</p>\n<pre><code class=\"lang-js\">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 ==========-->\n"}}},"visualMap":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a>, which should include <a href=\"option.html#visualMap\" target=\"_blank\">visual mapping component</a> before use.</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>Selects data range of visual mapping.</p>\n<pre><code class=\"lang-js\">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-js\">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</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->\n"}}},"timeline":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a>, which should include <a href=\"option.html#timeline\" target=\"_blank\">timeline component</a> before use.</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>Sets the current time point.</p>\n<pre><code class=\"lang-js\">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-js\">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 ==========-->\n"}}},"toolbox":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a>, which should include <a href=\"option.html#toolbox\" target=\"_blank\">toolbox component</a> before use.</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>Resets option.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;restore&#39;\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a>\n<!--============= pie ==========--></p>\n"}}},"pie":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a>, which should include <a href=\"option.html#series-pie\" target=\"_blank\">pie chart</a> before use.</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>Selects the specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieSelect&#39;,\n    // optional; series index; could be an array of multiple series\n    seriesIndex?: number|Array,\n    // optional; series name; could be an array of multiple series\n    seriesName?: string|Array,\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})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselected\">pieselected</a></p>\n"},"pieUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieUnSelect&#39;,\n    // optional; series index; could be an array of multiple series\n    seriesIndex?: number|Array,\n    // optional; series name; could be an array of multiple series\n    seriesName?: string|Array,\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})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieunselected\">pieunselected</a></p>\n"},"pieToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified pie chart.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieToggleSelect&#39;,\n    // optional; series index; could be an array of multiple series\n    seriesIndex?: number|Array,\n    // optional; series name; could be an array of multiple series\n    seriesName?: string|Array,\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})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= map ==========-->\n"}}},"map":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-map\" target=\"_blank\">map</a>, which should include <a href=\"option.html#series-map\" target=\"_blank\">map</a> before use.</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>Selects the specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapSelect&#39;,\n    // optional; series index; could be an array of multiple series\n    seriesIndex?: number|Array,\n    // optional; series name; could be an array of multiple series\n    seriesName?: string|Array,\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})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselected\">mapselected</a></p>\n"},"mapUnSelect":{"type":["Action"],"description":"<p>Cancels selecting specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapUnSelect&#39;,\n    // optional; series index; could be an array of multiple series\n    seriesIndex?: number|Array,\n    // optional; series name; could be an array of multiple series\n    seriesName?: string|Array,\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})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapunselected\">mapunselected</a></p>\n"},"mapToggleSelect":{"type":["Action"],"description":"<p>Toggles selecting status of specified map area.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapToggleSelect&#39;,\n    // optional; series index; could be an array of multiple series\n    seriesIndex?: number|Array,\n    // optional; series name; could be an array of multiple series\n    seriesName?: string|Array,\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})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->\n"}}},"graph":{"type":["*"],"description":"<p>Actions related to <a href=\"option.html#series-graph\" target=\"_blank\">graph</a>, which should include <a href=\"option.html#series-graph\" target=\"_blank\">graph</a> before use.</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>Highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;focusNodeAdjacency&#39;,\n\n    // Use seriesId or seriesIndex or seriesName to location the series.\n    seriesId: &#39;xxx&#39;,\n    seriesIndex: 0,\n    seriesName: &#39;nnn&#39;,\n\n    // Use dataIndex to location the node.\n    dataIndex: 12\n})\n</code></pre>\n<p>Event <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> will be thrown finally.</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>Reverse highlight the specified node and all of its adjacent nodes.</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;unfocusNodeAdjacency&#39;,\n\n    // Use seriesId or seriesIndex or seriesName to location the series.\n    seriesId: &#39;xxx&#39;,\n    seriesIndex: 0,\n    seriesName: &#39;nnn&#39;\n})\n</code></pre>\n<p>Event <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> will be thrown finally.</p>\n<!--============= brush ==========-->\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 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>range</code> and <code>coordRange</code> can be:</p>\n<ul>\n<li>If <code>brushType</code> is &#39;rect&#39;:\n  <code>range</code> and <code>coordRange</code> is: <code>[[minX, maxX], [minY, maxY]]</code></li>\n<li>If <code>brushType</code> is &#39;lineX&#39; or &#39;lineY&#39;:\n  <code>range</code> and <code>coordRange</code> is: [min, maxX]</li>\n<li>If <code>brushType</code> is &#39;polygon&#39;:\n  <code>range</code> and <code>coordRange</code> is: [[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p>The difference between <code>range</code> and <code>coordRange</code> is:</p>\n<ul>\n<li>If the area is &quot;global area&quot;, we should use <code>range</code>.</li>\n<li>If the area is &quot;coordinate system area&quot; (i.e., <code>geoIndex</code> or <code>xAxisIndex</code> or <code>yAxisIndex</code> is specified), we should use <code>coordRange</code>.</li>\n<li>The unit of <code>range</code> is &quot;pixel&quot;, while the unit of <code>coordRange</code> should be the save as the unit of the coordinate system. For example, in geo coordinate system, <code>coordRange</code> should be [<code>longitude</code>, <code>latitude</code>], and in cartesian, it should be [<code>axis A value</code>, <code>axis B value</code>, <code>axis C value</code>, ...].</li>\n</ul>\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-js\">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-js\">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>percent</code>. Please refer to callback <code>params</code> of each chart&#39;s label formatter.</p>\n<pre><code class=\"lang-js\">{\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>&#39;click&#39;</code>, <code>&#39;dblclick&#39;</code>, <code>&#39;mousedown&#39;</code>, <code>&#39;mousemove&#39;</code>, <code>&#39;mouseup&#39;</code>, <code>&#39;mouseover&#39;</code>, <code>&#39;mouseout&#39;</code>, <code>&#39;globalout&#39;</code>, <code>&#39;contextmenu&#39;</code>.</p>\n<p>See <a href=\"http://echarts.baidu.com/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":""}}},"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-js\">{\n    type: &#39;legendselectchanged&#39;,\n    // change legend name\n    name: string\n    // table of all legend selecting states\n    selected: Object\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-js\">{\n    type: &#39;legendselected&#39;,\n    // name of selected legend\n    name: string\n    // table of all legend selecting states\n    selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> In ECharts 2.x, event related to user switching lengend is now changed from  <code>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-js\">{\n    type: &#39;legendunselected&#39;,\n    // name of unselected legend\n    name: string\n    // table of all legend selecting states\n    selected: Object\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-js\">{\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-js\">{\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-js\">{\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"},"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-js\">{\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-js\">{\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-js\">{\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-js\">{\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-js\">{\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"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p>Event emitted after pie chart selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieselectchanged&#39;,\n    // series ID, can be passed in option\n    seriesId: string\n    // data name\n    name: name,\n    // table of all selected data.\n    selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>pieSelected</code> in ECharts 2.</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p>pie chartEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won&#39;t trigger this (User clicking event please use <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieselected&#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: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>pieselected</code> to <a href=\"#events.pieselectchanged\">pieselectchanged</a>.</p>\n"},"pieunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieUnSelect\">pieUnSelect</a></p>\n<p>pie chart cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won&#39;t trigger it. (For user clicking event, please refer to <a href=\"#events.pieselectchanged\">pieselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieunselected&#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: Object\n}\n</code></pre>\n"},"mapselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapToggleSelect\">mapToggleSelect</a></p>\n<p>Event emitted after map region selecting state changes.</p>\n<p>It will be triggered when user clicks to select.</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapselectchanged&#39;,\n    // series ID, can be passed in option\n    seriesId: string\n    // data name\n    name: name,\n    // table of all selected data.\n    selected: Object\n}\n</code></pre>\n<p><strong>Attention: </strong> This event is the same as event <code>mapSelected</code> in ECharts 2.</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p>map regionEvent after selecting.</p>\n<p>Use <code>dispatchAction</code> can trigger this event, but user clicking this event won&#39;t trigger this (User clicking event please use <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapselected&#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: Object\n}\n</code></pre>\n<p><strong>Attention: </strong>Event triggered by user switching legend in ECharts 2.x is changed from <code>mapselected</code> to <a href=\"#events.mapselectchanged\">mapselectchanged</a>.</p>\n"},"mapunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapUnSelect\">mapUnSelect</a></p>\n<p>map region cancels selected event.</p>\n<p>Use <code>dispatchAction</code> will trigger this event, but user clicking won&#39;t trigger it. (For user clicking event, please refer to <a href=\"#events.mapselectchanged\">mapselectchanged</a>).</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapunselected&#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: Object\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 highlight lines, which is the list of indices in <code>data</code> of <code>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"},"focusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>.</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p>Adjacent nodes reverse-highlight event in <a href=\"option.html#graph\" target=\"_blank\">graph</a>.</p>\n<p>See <a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>.</p>\n"},"brush":{"type":["Event"],"description":"<p>Event triggered after action <a href=\"#action.brush\">brush</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>dispatchAction</code> called, or use do brush behavior.\nBut this event will not be triggered in <code>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>rendered</code> event does not indicate that the animation finished (see <a href=\"#animation\">animation</a> and relevant options) or progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<p>For example:</p>\n<pre><code class=\"lang-js\">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=\"#animation\">animation</a> and relevant options) and progressive rendering finished (see <a href=\"#series-scatter.progressive\">progressive</a> and relevant options).</p>\n<pre><code class=\"lang-js\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on(&#39;finished&#39;, function () {\n    snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"}}}}}}