{"$schema":"https://echarts.apache.org/doc/json-schem","option":{"type":"Object","properties":{"echarts":{"type":["Object"],"description":"<p>全局 echarts 对象，在 script 标签引入 <code class=\"codespan\">echarts.js</code> 文件后获得，或者在 AMD 环境中通过 <code class=\"codespan\">require(&#39;echarts&#39;)</code> 获得。</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>创建一个 ECharts 实例，返回 <a href=\"#echartsInstance\">echartsInstance</a>，不能在单个容器上初始化多个 ECharts 实例。</p>\n<p><strong>参数</strong></p>\n<ul>\n<li><p><code class=\"codespan\">dom</code></p>\n<p>  实例容器，一般是一个具有高宽的<code class=\"codespan\">div</code>元素。</p>\n<p>  <strong>注：</strong>如果<code class=\"codespan\">div</code>是隐藏的，ECharts 可能会获取不到<code class=\"codespan\">div</code>的高宽导致初始化失败，这时候可以明确指定<code class=\"codespan\">div</code>的<code class=\"codespan\">style.width</code>和<code class=\"codespan\">style.height</code>，或者在<code class=\"codespan\">div</code>显示后手动调用 <a href=\"#echartsInstance.resize\">echartsInstance.resize</a> 调整尺寸。</p>\n<p>  ECharts 3 中支持直接使用<code class=\"codespan\">canvas</code>元素作为容器，这样绘制完图表可以直接将 canvas 作为图片应用到其它地方，例如在 WebGL 中作为贴图，这跟使用 <a href=\"#echartsInstance.getDataURL\">echartsInstance.getDataURL</a> 生成图片链接相比可以支持图表的实时刷新。</p>\n</li>\n<li><p><code class=\"codespan\">theme</code></p>\n<p>  应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 <a href=\"#echarts.registerTheme\">echarts.registerTheme</a> 注册的主题名称。</p>\n</li>\n<li><p><code class=\"codespan\">opts</code></p>\n<p>  附加参数。有下面几个可选项：</p>\n<ul>\n<li><p><code class=\"codespan\">devicePixelRatio</code></p>\n<p>  设备像素比，默认取浏览器的值<code class=\"codespan\">window.devicePixelRatio</code>。</p>\n</li>\n<li><p><code class=\"codespan\">renderer</code></p>\n<p>  渲染器，支持 <code class=\"codespan\">&#39;canvas&#39;</code> 或者 <code class=\"codespan\">&#39;svg&#39;</code>。参见 <a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20Canvas%20%E6%88%96%E8%80%85%20SVG%20%E6%B8%B2%E6%9F%93\" target=\"_blank\">使用 Canvas 或者 SVG 渲染</a>。</p>\n</li>\n<li><p><code class=\"codespan\">width</code></p>\n<p>  可显式指定实例宽度，单位为像素。如果传入值为 <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>，则表示自动取 <code class=\"codespan\">dom</code>（实例容器）的宽度。</p>\n</li>\n<li><p><code class=\"codespan\">height</code></p>\n<p>  可显式指定实例高度，单位为像素。如果传入值为 <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>，则表示自动取 <code class=\"codespan\">dom</code>（实例容器）的高度。</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>多个图表实例实现联动。</p>\n<p><strong>参数：</strong></p>\n<ul>\n<li><code class=\"codespan\">group</code>\n  group 的 id，或者图表实例的数组。</li>\n</ul>\n<p><strong>示例：</strong></p>\n<pre><code class=\"lang-js\">// 分别设置每个实例的 group id\nchart1.group = &#39;group1&#39;;\nchart2.group = &#39;group1&#39;;\necharts.connect(&#39;group1&#39;);\n// 或者可以直接传入需要联动的实例数组\necharts.connect([chart1, chart2]);\n</code></pre>\n"},"disconnect":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(group:string)\n</code></pre>\n<p>解除图表实例的联动，如果只需要移除单个实例，可以将通过将该图表实例 <code class=\"codespan\">group</code> 设为空。</p>\n<p><strong>参数：</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-js\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>销毁实例，实例销毁后无法再被使用。</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(target: HTMLDivElement|HTMLCanvasElement) =&gt; ECharts\n</code></pre>\n<p>获取 dom 容器上的实例。</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(mapName: string, geoJson: Object, specialAreas?: Object)\n</code></pre>\n<p>注册可用的地图，必须在包括 <a href=\"option.html#geo\" target=\"_blank\">geo</a> 组件或者 <a href=\"option.html#series-map\" target=\"_blank\">map</a> 图表类型的时候才能使用。</p>\n<p>使用方法见 <a href=\"option.html#geo.map\" target=\"_blank\">option.geo</a>。</p>\n<p><strong>参数：</strong></p>\n<ul>\n<li><p><code class=\"codespan\">mapName</code></p>\n<p>  地图名称，在 <a href=\"option.html#geo\" target=\"_blank\">geo</a> 组件或者 <a href=\"option.html#series-map\" target=\"_blank\">map</a> 图表类型中设置的 <code class=\"codespan\">map</code> 对应的就是该值。</p>\n</li>\n<li><p><code class=\"codespan\">geoJson</code></p>\n<p>  GeoJson 格式的数据，具体格式见 <a href=\"https://geojson.org/\" target=\"_blank\">https://geojson.org/</a>。</p>\n</li>\n<li><p><code class=\"codespan\">specialAreas</code></p>\n<p>  可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。</p>\n<p>  <strong>示例 <a href=\"https://echarts.apache.org/examples/zh/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  // 把阿拉斯加移到美国主大陆左下方\n  Alaska: {\n      // 左上角经度\n      left: -131,\n      // 左上角纬度\n      top: 25,\n      // 经度横跨的范围\n      width: 15\n  },\n  // 夏威夷\n  Hawaii: {\n      left: -110,\n      top: 28,\n      width: 5\n  },\n  // 波多黎各\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) =&gt; Object\n</code></pre>\n<p>获取已注册的地图，返回的对象类型如下</p>\n<pre><code class=\"lang-js\">{\n    // 地图的 geoJson 数据\n    geoJson: Object,\n    // 地图的特殊区域，见 registerMap\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>注册主题，用于<a href=\"#echarts.init\">初始化实例</a>的时候指定。</p>\n"},"graphic":{"type":["*"],"description":"<p>图形相关帮助方法。</p>\n","properties":{"extendShape":{"type":["Function"],"description":"<p>创建一个新的 shape class。</p>\n<pre><code class=\"lang-js\">(\n    opts: Object\n) =&gt; zrender.graphic.Path\n</code></pre>\n<p>更多的关于参数 <code class=\"codespan\">opts</code> 的细节，请参阅 <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>注册一个开发者定义的 shape class。</p>\n<pre><code class=\"lang-js\">(\n    name: string,\n    ShapeClass: zrender.graphic.Path\n)\n</code></pre>\n<p><code class=\"codespan\">ShapeClass</code> 须用 <a href=\"#echarts.graphic.extendShape\">echarts.graphic.extendShape</a> 生成。\n注册后，这个 class 可以用 <a href=\"#echarts.graphic.getShapeClass\">echarts.graphic.getShapeClass</a> 方法得到。\n<code class=\"codespan\">registerShape</code> 会覆盖已注册的 class，如果用相同的 <code class=\"codespan\">name</code> 的话。\n注册的 class，可以被用于 <a href=\"option.html#series-custom\" target=\"_blank\">自定义系列（custom series）</a> 和\n<a href=\"option.html#graphic\" target=\"_blank\">图形组件（graphic component）</a>，声明 <code class=\"codespan\">{type: name}</code> 即可。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">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>得到一个 <a href=\"#echarts.graphic.registerShape\">注册</a> 好的 class。</p>\n<pre><code class=\"lang-js\">(\n    name: String\n) =&gt; zrender.graphic.Path\n</code></pre>\n<p>这些内置 shape class 会被默认预先注册进去:\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>输入一组点，和一个矩形，返回被矩形截取过的点。</p>\n<pre><code class=\"lang-js\">(\n    // 要被截取的点列表，如 [[23, 44], [12, 15], ...]。\n    points: Array.&lt;Array.&lt;number&gt;&gt;,\n    // 用于截取点的矩形。\n    rect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    }\n) =&gt; Array.&lt;Array.&lt;number&gt;&gt; // 截取结果。\n</code></pre>\n"},"clipRectByRect":{"type":["Function"],"description":"<p>输入两个矩形，返回第二个矩形截取第一个矩形的结果。</p>\n<pre><code class=\"lang-js\">(\n    // 要被截取的矩形。\n    targetRect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    },\n    // 用于截取点的矩形。\n    rect: {\n        x: number,\n        y: number,\n        width: number,\n        height: number\n    }\n) =&gt; { // 截取结果。\n    x: number,\n    y: number,\n    width: number,\n    height: number\n}\n</code></pre>\n<p>注意：如果矩形完全被截干净，会返回 <code class=\"codespan\">undefined</code>。</p>\n"}}}}},"echartsInstance":{"type":["Object"],"description":"<p>通过 <a href=\"#echarts.init\">echarts.init</a> 创建的实例。</p>\n","properties":{"group":{"type":["string","number"],"description":"<p>图表的分组，用于<a href=\"#echarts.connect\">联动</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>设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 <code class=\"codespan\">setOption</code> 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启<a href=\"option.html#option.animation\" target=\"_blank\">动画</a>的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。</p>\n<p><strong>如下示例：</strong></p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=dynamic-data&reset=1&edit=1\" width=\"500\" height=\"400\" ></iframe>\n\n\n<p><strong>注：</strong> ECharts 2.x 中的通过 <code class=\"codespan\">addData</code> , <code class=\"codespan\">setSeries</code> 方法设置配置项的方式将不再支持，在 ECharts 3 中统一使用 <code class=\"codespan\">setOption</code>，可以参考上面示例。</p>\n<p><strong>参数：</strong></p>\n<p>调用方式：</p>\n<pre><code class=\"lang-js\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>或者</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 class=\"codespan\">option</code></p>\n<p>  图表的配置项和数据，具体见<a href=\"option.html\" target=\"_blank\">配置项手册</a>。</p>\n</li>\n<li><p><code class=\"codespan\">notMerge</code></p>\n<p>  可选，是否不跟之前设置的 <code class=\"codespan\">option</code> 进行合并，默认为 <code class=\"codespan\">false</code>，即合并。</p>\n</li>\n<li><p><code class=\"codespan\">lazyUpdate</code></p>\n<p>  可选，在设置完 <code class=\"codespan\">option</code> 后是否不立即更新图表，默认为 <code class=\"codespan\">false</code>，即立即更新。</p>\n</li>\n<li><p><code class=\"codespan\">silent</code></p>\n<p>  可选，阻止调用 <code class=\"codespan\">setOption</code> 时抛出事件，默认为 <code class=\"codespan\">false</code>，即抛出事件。</p>\n</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; number\n</code></pre>\n<p>获取 ECharts 实例容器的宽度。</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; number\n</code></pre>\n<p>获取 ECharts 实例容器的高度。</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>获取 ECharts 实例容器的 dom 节点。</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-js\">() =&gt; Object\n</code></pre>\n<p>获取当前实例中维护的 <code class=\"codespan\">option</code> 对象，返回的 <code class=\"codespan\">option</code> 对象中包含了用户多次 <code class=\"codespan\">setOption</code> 合并得到的配置项和数据，也记录了用户交互的状态，例如图例的开关，数据区域缩放选择的范围等等。所以从这份 <code class=\"codespan\">option</code> 可以恢复或者得到一个新的一模一样的实例。</p>\n<p><strong>注意：</strong>返回的 option 每个组件的属性值都统一是一个数组，不管 <code class=\"codespan\">setOption</code> 传进来的时候是单个组件的对象还是多个组件的数组。如下形式：</p>\n<pre><code class=\"lang-js\">{\n    title: [{...}],\n    legend: [{...}],\n    grid: [{...}]\n}\n</code></pre>\n<p>另外<strong>不推荐</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>因为 <code class=\"codespan\">getOption</code> 获取的是已经合并过默认值了的，所以在修改了某些配置项后会导致原本是根据这些配置项值去设置的默认值失效。</p>\n<p>因此我们更<strong>推荐</strong>通过<code class=\"codespan\">setOption</code>去修改部分配置。</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>改变图表尺寸，在容器大小发生改变时需要手动调用。</p>\n<p><strong>参数</strong></p>\n<ul>\n<li><p><code class=\"codespan\">opts</code></p>\n<p>  opts 可缺省。有下面几个可选项：</p>\n<ul>\n<li><p><code class=\"codespan\">width</code></p>\n<p>  可显式指定实例宽度，单位为像素。如果传入值为 <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>，则表示自动取 <code class=\"codespan\">dom</code>（实例容器）的宽度。</p>\n</li>\n<li><p><code class=\"codespan\">height</code></p>\n<p>  可显式指定实例高度，单位为像素。如果传入值为 <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>，则表示自动取 <code class=\"codespan\">dom</code>（实例容器）的高度。</p>\n</li>\n<li><p><code class=\"codespan\">silent</code></p>\n<p>  是否禁止抛出事件。默认为 <code class=\"codespan\">false</code>。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 <code class=\"codespan\">resize</code> 方法获取正确的高宽并且刷新画布，或者在 <code class=\"codespan\">opts</code> 中显示指定图表高宽。</p>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(payload: Object)\n</code></pre>\n<p>触发图表行为，例如图例开关<code class=\"codespan\">legendToggleSelect</code>, 数据区域缩放<code class=\"codespan\">dataZoom</code>，显示提示框<code class=\"codespan\">showTip</code>等等，更多见 <a href=\"#action\">action</a> 和 <a href=\"#events\">events</a> 的文档。</p>\n<p><code class=\"codespan\">payload</code> 参数可以通过<code class=\"codespan\">batch</code>属性同时触发多个行为。</p>\n<p><strong>注：</strong>在 ECharts 2.x 是通过 <code class=\"codespan\">myChart.component.tooltip.showTip</code> 这种形式调用相应的接口触发图表行为，入口很深，而且涉及到内部组件的组织。因此在 ECharts 3 里统一改为 <code class=\"codespan\">dispatchAction</code> 的形式。</p>\n<p><strong>示例</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n    type: &#39;dataZoom&#39;,\n    start: 20,\n    end: 30\n});\n// 可以通过 batch 参数批量分发多个 action\nmyChart.dispatchAction({\n    type: &#39;dataZoom&#39;,\n    batch: [{\n        // 第一个 dataZoom 组件\n        start: 20,\n        end: 30\n    }, {\n        // 第二个 dataZoom 组件\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>绑定事件处理函数。</p>\n<p>ECharts 中的事件有两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是 调用 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 后触发的事件。每个 action 都会有对应的事件，具体见 <a href=\"#action\">action</a> 和 <a href=\"#events\">events</a> 的文档。</p>\n<p>如果事件是外部 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 后触发，并且 action 中有 batch 属性触发批量的行为，则相应的响应事件参数里也会把属性都放在 batch 属性中。</p>\n<p><strong>参数：</strong></p>\n<ul>\n<li><p><code class=\"codespan\">eventName</code></p>\n<p>  事件名称，全小写，例如<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>注：</strong> ECharts 2.x 中会使用 <code class=\"codespan\">config</code> 对象中的 <code class=\"codespan\">CLICK</code> 等属性作为事件名称。在 ECharts 3 中统一使用跟 dom 事件一样的全小写字符串作为事件名。</p>\n</li>\n<li><p><code class=\"codespan\">query</code></p>\n<p>  可选的过滤条件，能够只在指定的组件或者元素上进行响应。可为 <code class=\"codespan\">string</code> 或者 <code class=\"codespan\">Object</code>。</p>\n<p>  如果为 <code class=\"codespan\">string</code> 表示组件类型。格式可以是 &#39;mainType&#39; 或者 &#39;mainType.subType&#39;。例如：</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>  如果为 <code class=\"codespan\">Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<pre><code class=\"lang-js\">  {\n      &lt;mainType&gt;Index: number // 组件 index\n      &lt;mainType&gt;Name: string // 组件 name\n      &lt;mainType&gt;Id: string // 组件 id\n      dataIndex: number // 数据项 index\n      name: string // 数据项 name\n      dataType: string // 数据项 type，如关系图中的 &#39;node&#39;, &#39;edge&#39;\n      element: string // 自定义系列中的 el 的 name\n  }\n</code></pre>\n<p>  例如：</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      // series name 为 &#39;uuu&#39; 的系列中的图形元素被 &#39;mouseover&#39; 时，此方法被回调。\n  });\n</code></pre>\n<p>  例如：</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      // series index 1 的系列中的 name 为 &#39;xx&#39; 的元素被 &#39;mouseover&#39; 时，此方法被回调。\n  });\n</code></pre>\n<p>  例如：</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      // 关系图的节点被点击时此方法被回调。\n  });\n  chart.on(&#39;click&#39;, {dataType: &#39;edge&#39;}, function () {\n      // 关系图的边被点击时此方法被回调。\n  });\n</code></pre>\n<p>  例如：</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;mouseup&#39;, {element: &#39;my_el&#39;}, function () {\n      // name 为 &#39;my_el&#39; 的元素被 &#39;mouseup&#39; 时，此方法被回调。\n  });\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">handler</code></p>\n<p>  事件处理函数。格式为:</p>\n<pre><code class=\"lang-js\">  (event: Object)\n</code></pre>\n</li>\n<li><p><code class=\"codespan\">context</code></p>\n<p>  可选。回调函数内部的<code class=\"codespan\">context</code>，即<code class=\"codespan\">this</code>的指向。</p>\n</li>\n</ul>\n"},"off":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(eventName: string, handler?: Function)\n</code></pre>\n<p>解绑事件处理函数。</p>\n<p><strong>参数：</strong></p>\n<ul>\n<li><p><code class=\"codespan\">eventName</code></p>\n<p>  事件名称。</p>\n</li>\n<li><p><code class=\"codespan\">handler</code></p>\n<p>  可选，可以传入需要解绑的处理函数，不传的话解绑所有该类型的事件函数。</p>\n</li>\n</ul>\n"},"convertToPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n    // finder 用于指示『使用哪个坐标系进行转换』。\n    // 通常地，可以使用 index 或者 id 或者 name 来定位。\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    // 要被转换的值。\n    value: Array|string\n    // 转换的结果为像素坐标值，以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n) =&gt; Array|string\n</code></pre>\n<p>转换坐标系上的点到像素坐标值。</p>\n<p>例：</p>\n<p>在地理坐标系（<a href=\"option.html#geo\" target=\"_blank\">geo</a>）上，把某个点的经纬度坐标转换成为像素坐标：</p>\n<pre><code class=\"lang-js\">// [128.3324, 89.5344] 表示 [经度，纬度]。\n// 使用第一个 geo 坐标系进行转换：\nchart.convertToPixel(&#39;geo&#39;, [128.3324, 89.5344]); // 参数 &#39;geo&#39; 等同于 {geoIndex: 0}\n// 使用第二个 geo 坐标系进行转换：\nchart.convertToPixel({geoIndex: 1}, [128.3324, 89.5344]);\n// 使用 id 为 &#39;bb&#39; 的 geo 坐标系进行转换：\nchart.convertToPixel({geoId: &#39;bb&#39;}, [128.3324, 89.5344]);\n</code></pre>\n<p>在直角坐标系（cartesian，<a href=\"option.html#grid\" target=\"_blank\">grid</a>）上，把某个点的坐标转换成为像素坐标：</p>\n<pre><code class=\"lang-js\">// [300, 900] 表示该点 x 轴上对应刻度值 300，y 轴上对应刻度值 900。\n// 注意，一个 grid 可能含有多个 xAxis 和多个 yAxis，任何一对 xAxis-yAxis 形成一个 cartesian。\n// 使用第三个 xAxis 和 id 为 &#39;y1&#39; 的 yAxis 形成的 cartesian 进行转换：\nchart.convertToPixel({xAxisIndex: 2, yAxisId: &#39;y1&#39;}, [300, 900]);\n// 使用 id 为 &#39;g1&#39; 的 grid 的第一个 cartesian 进行转换：\nchart.convertToPixel({gridId: &#39;g1&#39;}, [300, 900]);\n</code></pre>\n<p>把某个坐标轴的点转换成像素坐标：</p>\n<pre><code class=\"lang-js\">// id 为 &#39;x0&#39; 的 xAxis 的刻度 3000 位置所对应的横向像素位置：\nchart.convertToPixel({xAxisId: &#39;x0&#39;}, 3000); // 返回一个 number。\n// 第二个 yAxis 的刻度 600 位置所对应的纵向像素位置：\nchart.convertToPixel({yAxisIndex: 1}, 600); // 返回一个 number。\n</code></pre>\n<p>把关系图（<a href=\"option.html#series-graph\" target=\"_blank\">graph</a>）的点转换成像素坐标：</p>\n<pre><code class=\"lang-js\">// 因为每个 graph series 自己持有一个坐标系，所以我们直接在 finder 中指定 series：\nchart.convertToPixel({seriesIndex: 0}, [2000, 3500]);\nchart.convertToPixel({seriesId: &#39;k2&#39;}, [100, 500]);\n</code></pre>\n<p>在某个系列所在的坐标系（无论是 cartesian、geo、graph 等）中，转换某点成像素坐标：</p>\n<pre><code class=\"lang-js\">// 使用第一个系列对应的坐标系：\nchart.convertToPixel({seriesIndex: 0}, [128.3324, 89.5344]);\n// 使用 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 用于指示『使用哪个坐标系进行转换』。\n    // 通常地，可以使用 index 或者 id 或者 name 来定位。\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    // 要被转换的值，为像素坐标值，以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n    value: Array|string\n    // 转换的结果，为逻辑坐标值。\n) =&gt; Array|string\n</code></pre>\n<p>转换像素坐标值到逻辑坐标系上的点。是 <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a> 的逆运算。\n具体实例可参考 <a href=\"#echartsInstance.convertToPixel\">convertToPixel</a>。</p>\n"},"containPixel":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(\n    // finder 用于指示『在哪个坐标系或者系列上判断』。\n    // 通常地，可以使用 index 或者 id 或者 name 来定位。\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    // 要被判断的点，为像素坐标值，以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n    value: Array\n) =&gt; boolean\n</code></pre>\n<p>判断给定的点是否在指定的坐标系或者系列上。</p>\n<p>目前支持在这些坐标系和系列上进行判断：<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>例：</p>\n<pre><code class=\"lang-js\">// 判断 [23, 44] 点是否在 geoIndex 为 0 的 geo 坐标系上。\nchart.containPixel(&#39;geo&#39;, [23, 44]); // &#39;geo&#39; 等同于 {geoIndex: 0}\n// 判断 [23, 44] 点是否在 gridId 为 &#39;z&#39; 的 grid 上。\nchart.containPixel({gridId: &#39;z&#39;}, [23, 44]);\n// 判断 [23, 44] 点是否在 index 为 1，4，5 的系列上。\nchart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);\n// 判断 [23, 44] 点是否在 index 为 1，4，5 的系列或者 gridName 为 &#39;a&#39; 的 grid 上。\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>显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画，在数据加载完成后调用 <a href=\"#echartsInstance.hideLoading\">hideLoading</a> 隐藏加载动画。</p>\n<p><strong>参数：</strong></p>\n<ul>\n<li><p><code class=\"codespan\">type</code></p>\n<p>  可选，加载动画类型，目前只有一种<code class=\"codespan\">&#39;default&#39;</code></p>\n</li>\n<li><p><code class=\"codespan\">opts</code></p>\n<p>  可选，加载动画配置项，跟<code class=\"codespan\">type</code>有关，下面是默认配置项：</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  // 字体大小。从 `v4.8.0` 开始支持。\n  fontSize: 12,\n  // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。\n  showSpinner: true,\n  // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。\n  spinnerRadius: 10,\n  // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。\n  lineWidth: 5\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>隐藏动画加载效果。</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-js\">(opts: {\n    // 导出的格式，可选 png, jpeg\n    type?: string,\n    // 导出的图片分辨率比例，默认为 1。\n    pixelRatio?: number,\n    // 导出的图片背景色，默认使用 option 里的 backgroundColor\n    backgroundColor?: string,\n    // 忽略组件的列表，例如要忽略 toolbox 就是 [&#39;toolbox&#39;]\n    excludeComponents?: Array.&lt;string&gt;\n}) =&gt; string\n</code></pre>\n<p>导出图表图片，返回一个 base64 的 URL，可以设置为<code class=\"codespan\">Image</code>的<code class=\"codespan\">src</code>。</p>\n<p><strong>示例：</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    // 导出的格式，可选 png, jpeg\n    type?: string,\n    // 导出的图片分辨率比例，默认为 1。\n    pixelRatio?: number,\n    // 导出的图片背景色，默认使用 option 里的 backgroundColor\n    backgroundColor?: string,\n    // 忽略组件的列表，例如要忽略 toolbox 就是 [&#39;toolbox&#39;]\n    excludeComponents?: Array.&lt;string&gt;\n}) =&gt; string\n</code></pre>\n<p>导出联动的图表图片，返回一个 base64 的 url，可以设置为<code class=\"codespan\">Image</code>的<code class=\"codespan\">src</code>。导出图片中每个图表的相对位置跟容器的相对位置有关。</p>\n"},"appendData":{"type":["*"],"description":"<pre><code class=\"lang-js\">(opts: {\n    // 要增加数据的系列序号。\n    seriesIndex?: string,\n    // 增加的数据。\n    data?: Array|TypedArray\n}) =&gt; string\n</code></pre>\n<p>此接口用于，在大数据量（百万以上）的渲染场景，分片加载数据和增量渲染。在大数据量的场景下（例如地理数的打点），就算数据使用二进制格式，也会有几十或上百兆，在互联网环境下，往往需要分片加载。<code class=\"codespan\">appendData</code> 接口提供了分片加载后增量渲染的能力，渲染新加入的数据块时不会清除原有已经渲染的部分。</p>\n<p>注意：</p>\n<ul>\n<li>现在不支持 <a href=\"option.html#series\" target=\"_blank\">系列（series）</a> 使用 <a href=\"option.html#dataset\" target=\"_blank\">dataset</a> 同时使用 <code class=\"codespan\">appendData</code>，只支持系列使用自己的 <a href=\"option.html#series.data\" target=\"_blank\">series.data</a> 时使用 <code class=\"codespan\">appendData</code>。</li>\n<li>目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有：ECharts 基础版本的 <a href=\"option.html#series-scatter\" target=\"_blank\">散点图（scatter）</a> 和 <a href=\"option-gl.html#series-linesGL\" target=\"_blank\">线图（lines）</a>。ECharts GL 的 <a href=\"option-gl.html#series-scatterGL\" target=\"_blank\">散点图（scatterGL）</a>、<a href=\"option-gl.html#series-lines3D\" target=\"_blank\">线图（linesGL）</a> 和 <a href=\"option-gl.html#series-polygons3D\" target=\"_blank\">可视化建筑群（polygons3D）</a>。</li>\n</ul>\n"},"clear":{"type":["*"],"description":"<p>清空当前实例，会移除实例中所有的组件和图表。</p>\n"},"isDisposed":{"type":["*"],"description":"<pre><code class=\"lang-js\">() =&gt; boolean\n</code></pre>\n<p>当前实例是否已经被释放。</p>\n"},"dispose":{"type":["*"],"description":"<p>销毁实例，销毁后实例无法再被使用。</p>\n"}}},"action":{"type":["*"],"description":"<p>ECharts 中支持的图表行为，通过 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 触发。</p>\n<p><strong>注：</strong> 代码中的 <code class=\"codespan\">?:</code> 表示该属性是可选的。<em>EVENT:</em> 是 action 对应触发的事件。</p>\n","properties":{"highlight":{"type":["Action"],"description":"<p>高亮指定的数据图形。</p>\n<p>通过<code class=\"codespan\">seriesName</code>或者<code class=\"codespan\">seriesIndex</code>指定系列。如果要再指定某个数据可以再指定<code class=\"codespan\">dataIndex</code>或者<code class=\"codespan\">name</code>。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;highlight&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 可选，数据的 index\n    dataIndex?: number,\n    // 可选，数据的 名称\n    name?: string\n})\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>取消高亮指定的数据图形。</p>\n<p>通过<code class=\"codespan\">seriesName</code>或者<code class=\"codespan\">seriesIndex</code>指定系列。如果要指定某个数据可以再指定<code class=\"codespan\">dataIndex</code>或者<code class=\"codespan\">name</code>。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;downplay&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 可选，数据的 index\n    dataIndex?: number,\n    // 可选，数据的 名称\n    name?: string\n})\n</code></pre>\n<!--============= legend ==========-->"},"legend":{"type":["*"],"description":"<p><a href=\"option.html#legend\" target=\"_blank\">图例组件</a>相关的行为，必须引入<a href=\"option.html#legend\" target=\"_blank\">图例组件</a>后才能使用。</p>\n","properties":{"legendSelect":{"type":["Action"],"description":"<p>选中图例。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendSelect&#39;,\n    // 图例名称\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>取消选中图例。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendUnSelect&#39;,\n    // 图例名称\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>切换图例的选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;legendToggleSelect&#39;,\n    // 图例名称\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>将图例全选。</p>\n<pre><code class=\"lang-js\">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>将图例反选。</p>\n<pre><code class=\"lang-js\">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>控制图例的滚动。当 <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> 为 <code class=\"codespan\">&#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 ==========-->"}}},"tooltip":{"type":["*"],"description":"<p><a href=\"option.html#tooltip\" target=\"_blank\">提示框组件</a>相关的行为，必须引入<a href=\"option.html#tooltip\" target=\"_blank\">提示框组件</a>后才能使用。</p>\n","properties":{"showTip":{"type":["Action"],"description":"<p>显示提示框。</p>\n<p>有下面两种使用方式。</p>\n<p>1 指定在相对容器的位置处显示提示框，如果指定的位置无法显示则无效。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // 屏幕上的 x 坐标\n    x: number,\n    // 屏幕上的 y 坐标\n    y: number,\n    // 本次显示 tooltip 的位置。只在本次 action 中生效。\n    // 缺省则使用 option 中定义的 tooltip 位置。\n    position: Array.&lt;number&gt;|string|Function\n})\n</code></pre>\n<p>2 指定数据图形，根据 tooltip 的配置项显示提示框。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。\n    seriesIndex?: number,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\n    name?: string,\n    // 本次显示 tooltip 的位置。只在本次 action 中生效。\n    // 缺省则使用 option 中定义的 tooltip 位置。\n    position: Array.&lt;number&gt;|string|Function,\n})\n</code></pre>\n<p>参数<code class=\"codespan\">position</code>同<a href=\"option.html#tooltip.position\" target=\"_blank\">tooltip.position</a>相同。</p>\n"},"hideTip":{"type":["Action"],"description":"<p>隐藏提示框。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;hideTip&#39;\n})\n</code></pre>\n<!--============= dataZoom ==========-->"}}},"dataZoom":{"type":["*"],"description":"<p><a href=\"option.html#dataZoom\" target=\"_blank\">数据区域缩放组件</a>相关的行为，必须引入<a href=\"option.html#dataZoom\" target=\"_blank\">数据区域缩放组件</a>后才能使用。</p>\n","properties":{"dataZoom":{"type":["Action"],"description":"<p>数据区域缩放。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;dataZoom&#39;,\n    // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0\n    dataZoomIndex: number,\n    // 开始位置的百分比，0 - 100\n    start: number,\n    // 结束位置的百分比，0 - 100\n    end: number,\n    // 开始位置的数值\n    startValue: number,\n    // 结束位置的数值\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>启动或关闭 <code class=\"codespan\">toolbox</code> 中 <code class=\"codespan\">dataZoom</code> 的刷选状态。</p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n    type: &#39;takeGlobalCursor&#39;,\n    key: &#39;dataZoomSelect&#39;,\n    // 启动或关闭\n    dataZoomSelectActive: true\n});\n</code></pre>\n<!--============= visualMap ==========-->"}}},"visualMap":{"type":["*"],"description":"<p><a href=\"option.html#visualMap\" target=\"_blank\">视觉映射组件</a>相关的行为，必须引入<a href=\"option.html#visualMap\" target=\"_blank\">视觉映射组件</a>后才能使用。</p>\n","properties":{"selectDataRange":{"type":["Action"],"description":"<p>选取映射的数值范围。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;selectDataRange&#39;,\n    // 可选，visualMap 组件的 index，多个 visualMap 组件时有用，默认为 0\n    visualMapIndex: number,\n    // 连续型 visualMap 和 离散型 visualMap 不一样\n    // 连续型的是一个表示数值范围的数组。\n    // 离散型的是一个对象，键值是类目或者分段的索引。值是 `true`, `false`\n    selected: Object|Array\n})\n</code></pre>\n<p>å\n<strong>示例：</strong></p>\n<pre><code class=\"lang-js\">myChart.dispatchAction({\n    type: &#39;selectDataRange&#39;,\n    // 选取 20 到 40 的值范围\n    selected: [20, 40],\n    // 取消选中第二段\n    selected: { 1: false },\n    // 取消选中类目 `优`\n    selected: { &#39;优&#39;: false }\n});\n\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.datarangeselected\">datarangeselected</a></p>\n<!--============= timeline ==========-->"}}},"timeline":{"type":["*"],"description":"<p><a href=\"option.html#timeline\" target=\"_blank\">时间轴组件</a>相关的行为，必须引入<a href=\"option.html#timeline\" target=\"_blank\">时间轴组件</a>后才能使用。</p>\n","properties":{"timelineChange":{"type":["Action"],"description":"<p>设置当前的时间点。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;timelineChange&#39;,\n    // 时间点的 index\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>切换时间轴的播放状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;timelinePlayChange&#39;,\n    // 播放状态，true 为自动播放\n    playState: boolean\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.timelineplaychanged\">timelineplaychanged</a></p>\n<!--============= toolbox ==========-->"}}},"toolbox":{"type":["*"],"description":"<p><a href=\"option.html#toolbox\" target=\"_blank\">工具栏组件</a>相关的行为，必须引入<a href=\"option.html#toolbox\" target=\"_blank\">工具栏组件</a>后才能使用。</p>\n","properties":{"restore":{"type":["Action"],"description":"<p>重置 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><a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>相关的行为，必须引入<a href=\"option.html#series-pie\" target=\"_blank\">饼图</a>后才能使用。</p>\n","properties":{"pieSelect":{"type":["Action"],"description":"<p>选中指定的饼图扇形。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieSelect&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\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>取消选中指定的饼图扇形。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieUnSelect&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\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>切换指定的饼图扇形选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;pieToggleSelect&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.pieselectchanged\">pieselectchanged</a></p>\n<!--============= geo ==========-->"}}},"geo":{"type":["*"],"description":"<p><a href=\"option.html#series-geo\" target=\"_blank\">地图组件</a>相关的行为，必须引入<a href=\"option.html#geo\" target=\"_blank\">地图组件</a>后才能使用。</p>\n","properties":{"geoSelect":{"type":["Action"],"description":"<p>选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;geoSelect&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geoselected\">geoselected</a></p>\n"},"geoUnSelect":{"type":["Action"],"description":"<p>取消选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;geoUnSelect&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geounselected\">geounselected</a></p>\n"},"geoToggleSelect":{"type":["Action"],"description":"<p>切换指定的地图区域选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;geoToggleSelect&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geoselectchanged\">geoselectchanged</a></p>\n<!--============= map ==========-->"}}},"map":{"type":["*"],"description":"<p><a href=\"option.html#series-map\" target=\"_blank\">地图图表</a>相关的行为，必须引入<a href=\"option.html#series-map\" target=\"_blank\">地图图表</a>后才能使用。</p>\n","properties":{"mapSelect":{"type":["Action"],"description":"<p>选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapSelect&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\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>取消选中指定的地图区域。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapUnSelect&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\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>切换指定的地图区域选中状态。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;mapToggleSelect&#39;,\n    // 可选，系列 index，可以是一个数组指定多个系列\n    seriesIndex?: number|Array,\n    // 可选，系列名称，可以是一个数组指定多个系列\n    seriesName?: string|Array,\n    // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据\n    dataIndex?: number,\n    // 可选，数据名称，在有 dataIndex 的时候忽略\n    name?: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.mapselectchanged\">mapselectchanged</a></p>\n<!--============= graph ==========-->"}}},"graph":{"type":["*"],"description":"<p><a href=\"option.html#series-graph\" target=\"_blank\">关系图</a> 相关的行为，必须引入 <a href=\"option.html#series-graph\" target=\"_blank\">关系图</a> 后才能使用。</p>\n","properties":{"focusNodeAdjacency":{"type":["Action"],"description":"<p>将指定的节点以及其所有邻接节点高亮。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;focusNodeAdjacency&#39;,\n\n    // 使用 seriesId 或 seriesIndex 或 seriesName 来指定 series.\n    seriesId: &#39;xxx&#39;,\n    seriesIndex: 0,\n    seriesName: &#39;nnn&#39;,\n\n    // 使用 dataIndex 来指定目标节点，或者使用 edgeDataIndex 来指定目标边。\n    dataIndex: 12,\n    edgeDataIndex: 5\n})\n</code></pre>\n<p>最后会抛出 <a href=\"#event.focusNodeAdjacency\">focusNodeAdjacency</a> 事件。</p>\n"},"unfocusNodeAdjacency":{"type":["Action"],"description":"<p>将指定的节点以及其所有邻接节点高亮。</p>\n<pre><code class=\"lang-js\">dispatchAction({\n    type: &#39;unfocusNodeAdjacency&#39;,\n\n    // 使用 seriesId 或 seriesIndex 或 seriesName 来定位 series.\n    seriesId: &#39;xxx&#39;,\n    seriesIndex: 0,\n    seriesName: &#39;nnn&#39;\n})\n</code></pre>\n<p>最后会抛出 <a href=\"#event.unfocusNodeAdjacency\">unfocusNodeAdjacency</a> 事件。</p>\n<!--============= brush ==========-->"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">区域选择</a>相关的行为。</p>\n","properties":{"brush":{"type":["*"],"description":"<p>“刷选”动作进行中时，会触发此 action。\n此 action 能设置或删除 chart 中的选框，例如：</p>\n<pre><code class=\"lang-javascript\">myChart.dispatchAction({\n    type: &#39;brush&#39;,\n    areas: [ // areas 表示选框的集合，可以指定多个选框。\n             // 如果 areas 为空，则删除所有选框。\n             // 注意这并非增量接口而是全量接口，所以应包括所有的选框。\n        { // 选框一：\n\n            // 指定此选框是“坐标系选框”，属于 index 为 0 的 geo 坐标系。\n            // 也可以通过 xAxisIndex 或 yAxisIndex 来指定此选框属于直角坐标系。\n            // 如果没有指定，则此选框属于“全局选框”。不属于任何坐标系。\n            // 属于『坐标系选框』，可以随坐标系一起缩放平移。属于全局的选框不行。\n            geoIndex: 0,\n            // xAxisIndex: 0,\n            // yAxisIndex: 0,\n\n            // 指定选框的类型。可以为 &#39;polygon&#39;, &#39;rect&#39;, &#39;lineX&#39;, &#39;lineY&#39;\n            brushType: &#39;polygon&#39;,\n\n            // 如果是“全局选框”，则使用 range 来描述选框的范围（里面是像素坐标）。\n            range: [\n                ...\n            ],\n            // 如果是“坐标系选框”，则使用 coordRange 来指定选框的范围（里面是坐标系坐标）。\n            coordRange: [\n                // 这个例子中，因为指定了 geoIndex，所以 coordRange 里单位是经纬度。\n                [119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]\n            ]\n        },\n        ... // 选框二、三、四、...\n    ]\n});\n</code></pre>\n<p>其中，<code class=\"codespan\">areas</code> 中的 <code class=\"codespan\">range</code> 和 <code class=\"codespan\">coordRange</code> 的格式，根据 brushType 不同而不同：</p>\n<ul>\n<li>brushType 为 &#39;rect&#39;\n  <code class=\"codespan\">range</code> 和 <code class=\"codespan\">coordRange</code> 的格式为：<code class=\"codespan\">[[minX, maxX], [minY, maxY]]</code></li>\n<li>brushType 为 &#39;lineX&#39; 或 &#39;lineY&#39;\n  <code class=\"codespan\">range</code> 和 <code class=\"codespan\">coordRange</code> 的格式为：[min, maxX]</li>\n<li>brushType 为 &#39;polygon&#39;\n  <code class=\"codespan\">range</code> 和 <code class=\"codespan\">coordRange</code> 的格式为：[[point1X, point1X], [point2X, point2X], ...]</li>\n</ul>\n<p><code class=\"codespan\">range</code> 和 <code class=\"codespan\">coordRange</code> 的区别是：</p>\n<ul>\n<li>当此选框为『全局选框』时，使用 <code class=\"codespan\">range</code>。</li>\n<li>当此选框为『坐标系选框』时（即指定了 <code class=\"codespan\">geoIndex</code> 或 <code class=\"codespan\">xAxisIndex</code> 或 <code class=\"codespan\">yAxisIndex</code> 时），使用 <code class=\"codespan\">coordRange</code>。</li>\n<li><code class=\"codespan\">range</code> 的单位为 <em>像素</em>，<code class=\"codespan\">coordRange</code> 的单位为 <em>坐标系单位</em>，比如 geo 中，<code class=\"codespan\">coordRange</code> 单位为经纬度，直角坐标系中，coordRange 单位为对应轴的数据的单位。</li>\n</ul>\n"},"brushEnd":{"type":["*"],"description":"<blockquote>\n<p>从 <code class=\"codespan\">v4.5.0</code> 开始支持</p>\n</blockquote>\n<p>“刷选” 动作完毕时，会自动触发此 action。\n其参数和 <a href=\"#action.brush.brush\">brush action</a> 完全相同。</p>\n"},"takeGlobalCursor":{"type":["*"],"description":"<p>刷选模式的开关。使用此 action 可将当前鼠标变为可刷选状态。\n事实上，点击 <a href=\"option.html#toolbox.feature.brush\" target=\"_blank\">toolbox</a> 中的 brush 按钮时，就是通过这个 action，将当前普通鼠标变为刷选器的。例如：</p>\n<p>此 action 对应的事件为 <a href=\"#events.globalCursorTaken\">globalCursorTaken</a>。</p>\n<pre><code class=\"lang-js\">api.dispatchAction({\n    type: &#39;takeGlobalCursor&#39;,\n    // 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。\n    key: &#39;brush&#39;,\n    brushOption: {\n        // 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。\n        brushType: string,\n        // 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。\n        brushMode: string\n    }\n});\n</code></pre>\n"}}}}},"events":{"type":["*"],"description":"<p>在 ECharts 中主要通过 <a href=\"#echartsInstance.on\">on</a> 方法添加事件处理函数，该文档描述了所有 ECharts 的事件列表。</p>\n<p>ECharts 中的事件分为两种，一种是鼠标事件，在鼠标点击某个图形上会触发，还有一种是 调用 <a href=\"#echartsInstance.dispatchAction\">dispatchAction</a> 后触发的事件。</p>\n<p><strong>示例：</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>详细的事件注册方式参见 <a href=\"#echartsInstance.on\">on</a>。</p>\n","properties":{"鼠标事件":{"type":["*"],"description":"<p>鼠标事件的事件参数是事件对象的数据的各个属性，对于图表的点击事件，基本参数如下，其它图表诸如饼图可能会有部分附加参数。例如饼图会有<code class=\"codespan\">percent</code>属性表示百分比，具体见各个图表类型的 label formatter 回调函数的 <code class=\"codespan\">params</code>。</p>\n<pre><code class=\"lang-js\">{\n    // 当前点击的图形元素所属的组件名称，\n    // 其值如 &#39;series&#39;、&#39;markLine&#39;、&#39;markPoint&#39;、&#39;timeLine&#39; 等。\n    componentType: string,\n    // 系列类型。值可能为：&#39;line&#39;、&#39;bar&#39;、&#39;pie&#39; 等。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesType: string,\n    // 系列在传入的 option.series 中的 index。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesIndex: number,\n    // 系列名称。当 componentType 为 &#39;series&#39; 时有意义。\n    seriesName: string,\n    // 数据名，类目名\n    name: string,\n    // 数据在传入的 data 数组中的 index\n    dataIndex: number,\n    // 传入的原始数据项\n    data: Object,\n    // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，\n    // dataType 的值会是 &#39;node&#39; 或者 &#39;edge&#39;，表示当前点击在 node 还是 edge 上。\n    // 其他大部分图表中只有一种 data，dataType 无意义。\n    dataType: string,\n    // 传入的数据值\n    value: number|Array,\n    // 数据图形的颜色。当 componentType 为 &#39;series&#39; 时有意义。\n    color: string,\n    // 用户自定义的数据。只在 graphic component 和自定义系列（custom series）\n    // 中生效，如果节点定义上设置了如：{type: &#39;circle&#39;, info: {some: 123}}。\n    info: *\n}\n</code></pre>\n<p>鼠标事件包括 <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>参见 <a href=\"tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA\" target=\"_blank\">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>\n切换图例选中状态后的事件。</p>\n<p><strong>注：</strong>图例组件用户切换图例开关会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendselectchanged&#39;,\n    // 切换的图例名称\n    name: string\n    // 所有图例的选中状态表\n    selected: Object\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\n图例选中后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendselected&#39;,\n    // 选中的图例名称\n    name: string\n    // 所有图例的选中状态表\n    selected: Object\n}\n</code></pre>\n<p><strong>注：</strong> ECharts 2.x 中用户开关图例对应的事件从 <code class=\"codespan\">legendselected</code> 改为 <a href=\"#events.legendselectchanged\">legendselectchanged</a>。</p>\n"},"legendunselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendUnSelect\">legendUnSelect</a>\n图例取消选中后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendunselected&#39;,\n    // 取消选中的图例名称\n    name: string\n    // 所有图例的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"legendselectall":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendAllSelect\">legendAllSelect</a>\n图例全选后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendselectall&#39;,\n    // 所有图例的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"legendinverseselect":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendInverseSelect\">legendInverseSelect</a>\n图例反选后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;legendinverseselect&#39;,\n    // 所有图例的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\n图例滚动事件。</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>数据区域缩放后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;datazoom&#39;,\n    // 缩放的开始位置的百分比，0 - 100\n    start: number\n    // 缩放的结束位置的百分比，0 - 100\n    end: number\n    // 缩放的开始位置的数值，只有在工具栏的缩放行为的事件中存在。\n    startValue?: number\n    // 缩放的结束位置的数值，只有在工具栏的缩放行为的事件中存在。\n    endValue?: number\n}\n</code></pre>\n"},"datarangeselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataRange.selectDataRange\">selectDataRange</a>\n视觉映射组件中，<code class=\"codespan\">range</code> 值改变后触发的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;datarangeselected&#39;,\n    // 连续型 visualMap 和 离散型 visualMap 不一样\n    // 连续型的是一个表示数值范围的数组。\n    // 离散型的是一个对象，键值是类目或者分段的索引。值是`true`或`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>\n时间轴中的时间点改变后的事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;timelinechanged&#39;,\n    // 时间点的 index\n    currentIndex: number\n}\n</code></pre>\n"},"timelineplaychanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelinePlayChange\">timelinePlayChange</a>\n时间轴中播放状态的切换事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;timelineplaychanged&#39;,\n    // 播放状态，true 为自动播放\n    playState: boolean\n}\n</code></pre>\n"},"restore":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toolbox.restore\">restore</a>\n重置 option 事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;restore&#39;\n}\n</code></pre>\n"},"dataviewchanged":{"type":["Event"],"description":"<p><a href=\"option.html#toolbox.feature.dataView\" target=\"_blank\">工具栏中数据视图</a>的修改事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;dataviewchanged&#39;\n}\n</code></pre>\n"},"magictypechanged":{"type":["Event"],"description":"<p><a href=\"option.html#toolbox.feature.magicType\" target=\"_blank\">工具栏中动态类型切换</a>的切换事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;magictypechanged&#39;,\n    // 点击切换的当前类型，同 echarts 2.x 中的 type 属性\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><a href=\"option.html#geo\" target=\"_blank\">geo</a> 中地图区域切换选中状态的事件。</p>\n<p>用户点击选中会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;geoselectchanged&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"geoselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoSelect\">geoSelect</a></p>\n<p><a href=\"option.html#{componentTypeFull}\" target=\"_blank\">geo</a> 中地图区域选中后的事件。</p>\n<p>使用<code class=\"codespan\">dispatchAction</code>可触发此事件，用户点击不会触发此事件（用户点击事件请使用 <a href=\"#events.geoselectchanged\">geoselectchanged</a>）。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;geoselected&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"geounselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.geo.geoUnSelect\">geoUnSelect</a></p>\n<p><a href=\"option.html#geo\" target=\"_blank\">geo</a> 中地图区域取消选中后的事件。</p>\n<p>使用<code class=\"codespan\">dispatchAction</code>可触发此事件，用户点击不会触发此事件（用户点击事件请使用 <a href=\"#events.geoselectchanged\">geoselectchanged</a>）。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;geounselected&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"pieselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieToggleSelect\">pieToggleSelect</a></p>\n<p><a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a> 中饼图扇形切换选中状态的事件。</p>\n<p>用户点击选中会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieselectchanged&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注：</strong> 该事件同 ECharts 2 中的 <code class=\"codespan\">pieSelected</code> 事件相同。</p>\n"},"pieselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.pie.pieSelect\">pieSelect</a></p>\n<p><a href=\"option.html#{componentTypeFull}\" target=\"_blank\">series-pie</a> 中饼图扇形选中后的事件。</p>\n<p>使用<code class=\"codespan\">dispatchAction</code>可触发此事件，用户点击不会触发此事件（用户点击事件请使用 <a href=\"#events.pieselectchanged\">pieselectchanged</a>）。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieselected&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注：</strong> ECharts 2.x 中用户开关图例对应的事件从 <code class=\"codespan\">pieselected</code> 改为 <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><a href=\"option.html#series-pie\" target=\"_blank\">series-pie</a> 中饼图扇形取消选中后的事件。</p>\n<p>使用<code class=\"codespan\">dispatchAction</code>可触发此事件，用户点击不会触发此事件（用户点击事件请使用 <a href=\"#events.pieselectchanged\">pieselectchanged</a>）。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;pieunselected&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\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><a href=\"option.html#series-map\" target=\"_blank\">series-map</a> 中地图区域切换选中状态的事件。</p>\n<p>用户点击选中会触发该事件。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapselectchanged&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注：</strong> 该事件同 ECharts 2 中的 <code class=\"codespan\">mapSelected</code> 事件相同。</p>\n"},"mapselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.map.mapSelect\">mapSelect</a></p>\n<p><a href=\"option.html#{componentTypeFull}\" target=\"_blank\">series-map</a> 中地图区域选中后的事件。</p>\n<p>使用<code class=\"codespan\">dispatchAction</code>可触发此事件，用户点击不会触发此事件（用户点击事件请使用 <a href=\"#events.mapselectchanged\">mapselectchanged</a>）。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapselected&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n<p><strong>注：</strong> ECharts 2.x 中用户开关图例对应的事件从 <code class=\"codespan\">mapselected</code> 改为 <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><a href=\"option.html#series-map\" target=\"_blank\">series-map</a> 中地图区域取消选中后的事件。</p>\n<p>使用<code class=\"codespan\">dispatchAction</code>可触发此事件，用户点击不会触发此事件（用户点击事件请使用 <a href=\"#events.mapselectchanged\">mapselectchanged</a>）。</p>\n<pre><code class=\"lang-js\">{\n    type: &#39;mapunselected&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: Object\n}\n</code></pre>\n"},"axisareaselected":{"type":["Event"],"description":"<p><a href=\"option.html#parallelAxis\" target=\"_blank\">平行坐标轴 (Parallel)</a>范围选取事件。</p>\n<p>当进行坐标轴范围选取时，可以用如下方式获取当前高亮的线所对应的 data indices\n（即 <code class=\"codespan\">series</code> 的 <code class=\"codespan\">data</code> 中的序号列表）。</p>\n<pre><code class=\"lang-javascript\">chart.on(&#39;axisareaselected&#39;, function () {\n    var series0 = chart.getModel().getSeries()[0];\n    var series1 = chart.getModel().getSeries()[1];\n    var indices0 = series0.getRawIndicesByActiveState(&#39;active&#39;);\n    var indices1 = series1.getRawIndicesByActiveState(&#39;active&#39;);\n    console.log(indices0, indices1);\n});\n</code></pre>\n"},"focusnodeadjacency":{"type":["Event"],"description":"<p><a href=\"option.html#graph\" target=\"_blank\">graph</a>的邻接节点高亮事件。</p>\n<p>参见<a href=\"#action.graph.focusNodeAdjacency\">focusNodeAdjacency</a>。</p>\n"},"unfocusnodeadjacency":{"type":["Event"],"description":"<p><a href=\"option.html#graph\" target=\"_blank\">graph</a>的邻接节点取消高亮事件。</p>\n<p>参见<a href=\"#action.graph.unfocusNodeAdjacency\">unfocusNodeAdjacency</a>。</p>\n"},"brush":{"type":["Event"],"description":"<p>“选框正在添加”事件。即发出 <a href=\"#action.brush.brush\">brush action</a> 得到的事件。</p>\n"},"brushEnd":{"type":["Event"],"description":"<blockquote>\n<p>从 <code class=\"codespan\">v4.5.0</code> 开始支持</p>\n</blockquote>\n<p>“选框添加完毕”事件。即发出 <a href=\"#action.brush.brushEnd\">brushEnd action</a> 得到的事件。</p>\n"},"brushselected":{"type":["Event"],"description":"<p>对外通知当前选中了什么。</p>\n<p>参见 <a href=\"option.html#brush\" target=\"_blank\">区域选择</a>。</p>\n<p>这个事件，在 <code class=\"codespan\">setOption</code> 时不会发出，在其他的 dispatchAction 时，或者用户在界面中创建、删除、修改选框时会发出。</p>\n<p>事件参数内容为：</p>\n<pre><code class=\"lang-javascript\">{\n    type: &#39;brushselected&#39;,\n    batch: [\n        {\n            // brush 组件的 id，大多数情况只使用一个 brush 组件，所以不必理会。\n            brushId: string,\n            // brush 组件的 index。\n            brushIndex: number,\n            // brush 组件的 name。\n            brushName: string,\n\n            // 各个选框\n            areas: [\n                { // 第一个选框\n                    // 则此处使用 range 或者 coordRange 记录了选框当前的形状。\n                    // 其值参见 brush action 中 range/coordRange 的解释。\n\n                    // 如果此选框是“全局选框”（即并不属于哪个坐标系），则使用 range 单位是像素。\n                    range: Array.&lt;number&gt;,\n\n                    // 如果此选框是“坐标系选框”，则使用 coordRange 和 coordRanges，单位为坐标系单位。\n                    coordRange: Array.&lt;number&gt;,\n                    // 其中，如果选框属于直角坐标系（grid）的某个轴（例如指定了 xAxisIndex: 0），\n                    // 且此轴对应于多个 cartesian（例如，对应两个 yAxis），那么这里 coordRanges\n                    // 是每个 cartesian 中的选框的范围值。而 coordRange 是 coordRanges[0]。\n                    coordRanges: Array.&lt;Array.&lt;number&gt;&gt;,\n                },\n                ...\n            ],\n\n            // 每个系列被选中的项。\n            // 注意，如果某个系列不支持 brush，但是还是会在这里出现对应的项。\n            // 也就是说，selected 可以使用 seriesIndex 来直接找到对应的项。\n            selected: [\n                { // series 0 被选中的项\n                    seriesIndex: number,\n                    dataIndex: [ 3, 6, 12, 23 ] // 用这些 dataIndex，可以去原始数据中找到真正的值。\n                },\n                { // series 1 被选中的项\n                    seriesIndex: number,\n                    dataIndex: []\n                },\n                ...\n            ]\n        },\n        ...\n    ]\n}\n</code></pre>\n<p>事件使用方式例如：</p>\n<pre><code class=\"lang-javascript\">var dataBySeries = [\n    [ 12, 23, 54, 6 ], // series 0 的数据\n    [ 34, 34433, 2223, 21122, 1232, 34 ] // 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; // 统计选中项的数据值的和\n\n    for (var sIdx = 0; sIdx &lt; brushComponent.selected.length; sIdx++) {\n        // 对于每个 series：\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>避免此事件频繁触发</strong>，可以使用 <a href=\"option.html#brush.throttleType\" target=\"_blank\">brush.throttleType</a>。</p>\n"},"globalcursortaken":{"type":["Event"],"description":"<p>参见 <a href=\"#action.brush.takeGlobalCursor\">takeGlobalCursor</a>。</p>\n"},"rendered":{"type":["Event"],"description":"<p>渲染结束事件。注意 <code class=\"codespan\">rendered</code> 事件并不代表渲染动画（参见 <a href=\"#animation\">animation</a> 相关配置）或者渐进渲染（参见 <a href=\"#series-scatter.progressive\">progressive</a> 相关配置）停止，只代表本帧的渲染结束。</p>\n<p>例如：</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>渲染完成事件。当渲染动画（参见 <a href=\"#animation\">animation</a> 相关配置）或者渐进渲染（参见 <a href=\"#series-scatter.progressive\">progressive</a> 相关配置）停止时触发。</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"}}}}}}