{"$schema":"https://echarts.apache.org/doc/json-schema","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-ts\">(dom?: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {\n    devicePixelRatio?: number,\n    renderer?: string,\n    useDirtyRect?: boolean, // 从 `5.0.0` 开始支持\n    ssr?: boolean,          // 从 `5.3.0` 开始支持\n    width?: number|string,\n    height?: number|string,\n    locale?: string         // 从 `5.0.0` 开始支持\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>  实例容器，一般是一个具有高宽的 DIV 元素。只有在设置<code class=\"codespan\">opts.ssr</code>开启了服务端渲染后该参数才是可选。</p>\n<p>  也支持直接使用<code class=\"codespan\">canvas</code>元素作为容器，这样绘制完图表可以直接将 canvas 作为图片应用到其它地方，例如在 WebGL 中作为贴图，这跟使用 <a href=\"#echartsInstance.getDataURL\">getDataURL</a> 生成图片链接相比可以支持图表的实时刷新。</p>\n</li>\n<li><p><code class=\"codespan\">theme</code></p>\n<p>  应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 <a href=\"#echarts.registerTheme\">echarts.registerTheme</a> 注册的主题名称。参见 <a href=\"https://echarts.apache.org/handbook/zh/concepts/style\" target=\"_blank\">ECharts 中的样式简介</a>。</p>\n</li>\n<li><p><code class=\"codespan\">opts</code></p>\n<p>  附加参数。有下面几个可选项：</p>\n<ul>\n<li><code class=\"codespan\">devicePixelRatio</code>设备像素比，默认取浏览器的值<code class=\"codespan\">window.devicePixelRatio</code>。</li>\n<li><code class=\"codespan\">renderer</code> 渲染模式，支持<code class=\"codespan\">&#39;canvas&#39;</code>或者<code class=\"codespan\">&#39;svg&#39;</code>。参见 <a href=\"https://echarts.apache.org/handbook/zh/best-practices/canvas-vs-svg\" target=\"_blank\">使用 Canvas 或者 SVG 渲染</a>。</li>\n<li><code class=\"codespan\">ssr</code> 是否使用服务端渲染，只有在 SVG 渲染模式有效。开启后不再会每帧自动渲染，必须要调用 <a href=\"#echartsInstance.renderToSVGString\">renderToSVGString</a> 方法才能得到渲染后 SVG 字符串。</li>\n<li><code class=\"codespan\">useDirtyRect</code>是否开启脏矩形渲染，只有在 Canvas 渲染模式有效，默认为<code class=\"codespan\">false</code>。参见 <a href=\"https://echarts.apache.org/handbook/zh/basics/release-note/v5-feature\" target=\"_blank\">ECharts 5 新特性</a>。</li>\n<li><code class=\"codespan\">width</code> 可显式指定实例宽度，单位为像素。如果传入值为<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>，则表示自动取 <code class=\"codespan\">dom</code>（实例容器）的宽度。</li>\n<li><code class=\"codespan\">height</code> 可显式指定实例高度，单位为像素。如果传入值为<code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>，则表示自动取 <code class=\"codespan\">dom</code>（实例容器）的高度。</li>\n<li><p><code class=\"codespan\">locale</code> 使用的语言，内置 <code class=\"codespan\">&#39;ZH&#39;</code> 和 <code class=\"codespan\">&#39;EN&#39;</code> 两个语言，也可以使用 <a href=\"#echarts.registerLocale\">echarts.registerLocale</a> 方法注册新的语言包。目前支持的语言见 <a href=\"https://github.com/apache/echarts/tree/release/src/i18n\" target=\"_blank\">src/i18n</a>。</p>\n<p>如果不指定主题，也需在传入<code class=\"codespan\">opts</code>前先传入<code class=\"codespan\">null</code>，如：</p>\n<pre><code class=\"lang-ts\">const chart = echarts.init(dom, null, {renderer: &#39;svg&#39;});\n</code></pre>\n</li>\n</ul>\n</li>\n</ul>\n<p><strong>注：</strong>\n如果容器是隐藏的，ECharts 可能会获取不到 DIV 的高宽导致初始化失败，这时候可以明确指定 DIV 的<code class=\"codespan\">style.width</code>和<code class=\"codespan\">style.height</code>，或者在<code class=\"codespan\">div</code>显示后手动调用 <a href=\"#echartsInstance.resize\">resize</a> 调整尺寸。</p>\n<p>在使用服务端渲染的模式下，必须通过<code class=\"codespan\">opts.width</code>和<code class=\"codespan\">opts.height</code>设置高和宽。</p>\n"},"connect":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(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-ts\">// 分别设置每个实例的 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-ts\">(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-ts\">(target: ECharts|HTMLDivElement|HTMLCanvasElement)\n</code></pre>\n<p>销毁实例，实例销毁后无法再被使用。</p>\n"},"getInstanceByDom":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(target: HTMLDivElement|HTMLCanvasElement) =&gt; ECharts\n</code></pre>\n<p>获取 dom 容器上的实例。</p>\n"},"use":{"type":["Function"],"description":"<blockquote>\n<p>从 <code class=\"codespan\">5.0.1</code> 开始支持</p>\n</blockquote>\n<p>使用组件，配合新的按需引入的接口使用。</p>\n<p>注意：该方法必须在<code class=\"codespan\">echarts.init</code>之前使用。</p>\n<pre><code class=\"lang-ts\">// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。\nimport * as echarts from &#39;echarts/core&#39;;\n// 引入柱状图图表，图表后缀都为 Chart\nimport {\n    BarChart\n} from &#39;echarts/charts&#39;;\n// 引入直角坐标系组件，组件后缀都为 Component\nimport {\n    GridComponent\n} from &#39;echarts/components&#39;;\n// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步\nimport {\n    CanvasRenderer\n} from &#39;echarts/renderers&#39;;\n\n// 注册必须的组件\necharts.use(\n    [GridComponent, BarChart, CanvasRenderer]\n);\n</code></pre>\n<p>更详细的使用方式见 <a href=\"https://echarts.apache.org/handbook/zh/basics/import\" target=\"_blank\">在项目中引入 Apache ECharts</a> 一文</p>\n"},"registerMap":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(\n    mapName: string,\n    opt: {\n        geoJSON: Object | string;\n        specialAreas?: Object;\n    }\n)\n| (\n    mapName: string,\n    opt: {\n        svg: Object | string;\n    }\n)\n| (\n    mapName: string,\n    geoJSON: Object | string,\n    specialAreas?: Object\n)\n</code></pre>\n<p>注册可用的地图，只在 <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\">opt</code></p>\n<ul>\n<li><p><code class=\"codespan\">geoJSON</code> 可选。GeoJson 格式的数据，具体格式见 <a href=\"https://geojson.org/\" target=\"_blank\">https://geojson.org/</a>。可以是 JSON 字符串，也可以是解析得到的对象。这个参数也可以写为 <code class=\"codespan\">geoJson</code>，效果相同。</p>\n</li>\n<li><p><code class=\"codespan\">svg</code> 可选。从 <code class=\"codespan\">v5.1.0</code> 开始支持SVG 格式的数据。可以是字符串，也可以是解析得到的 SVG DOM 对象。更多信息参见 <a href=\"tutorial.html#%E5%9C%B0%E7%90%86%E5%9D%90%E6%A0%87%E7%B3%BB%E5%92%8C%E5%9C%B0%E5%9B%BE%E7%B3%BB%E5%88%97%E7%9A%84%20SVG%20%E5%BA%95%E5%9B%BE\" target=\"_blank\">SVG 底图</a>。</p>\n</li>\n<li><p><code class=\"codespan\">specialAreas</code> 可选。将地图中的部分区域缩放到合适的位置，可以使得整个地图的显示更加好看。只在 <code class=\"codespan\">geoJSON</code> 中生效，<code class=\"codespan\">svg</code> 中不生效。</p>\n</li>\n</ul>\n</li>\n</ul>\n<p>示例 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=map-usa\" target=\"_blank\">USA Population Estimates</a>：</p>\n<pre><code class=\"lang-ts\">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<p>注：如果你在项目中使用了按需引入，从 v5.3.0 开始<code class=\"codespan\">registerMap</code>必须要在引入地图组件后才能使用。</p>\n"},"getMap":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(mapName: string) =&gt; Object\n</code></pre>\n<p>获取已注册的地图，返回的对象类型如下</p>\n<pre><code class=\"lang-ts\">{\n    // 地图的 geoJSON 数据\n    geoJSON: Object,\n    // 地图的特殊区域，见 registerMap\n    specialAreas: Object\n}\n</code></pre>\n<p>注：</p>\n<ul>\n<li><code class=\"codespan\">geoJSON</code> 也可写为 <code class=\"codespan\">geoJson</code>，二者引用的是相同的内容。</li>\n<li>对于 <code class=\"codespan\">registerMap</code> 所注册的 SVG ，暂并不支持从此方法中返回。</li>\n<li>如果你在项目中使用了按需引入，从 v5.3.0 开始<code class=\"codespan\">getMap</code>必须要在引入地图组件后才能使用。</li>\n</ul>\n"},"registerTheme":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(themeName: string, theme: Object)\n</code></pre>\n<p>注册主题，用于<a href=\"#echarts.init\">初始化实例</a>的时候指定。</p>\n"},"registerLocale":{"type":["Function"],"description":"<blockquote>\n<p>从 <code class=\"codespan\">5.0.0</code> 开始支持</p>\n</blockquote>\n<pre><code class=\"lang-ts\">(locale: string, localeCfg: Object)\n</code></pre>\n<p>注册语言包，用于<a href=\"#echarts.init\">初始化实例</a>的时候指定。语言包格式见 <a href=\"https://github.com/apache/echarts/blob/release/src/i18n/langEN.ts\" target=\"_blank\">src/i18n/langEN.ts</a></p>\n"},"setPlatformAPI":{"type":["Function"],"description":"<blockquote>\n<p>从 <code class=\"codespan\">5.3.0</code> 开始支持</p>\n</blockquote>\n<pre><code class=\"lang-ts\">(platformAPI?: {\n    createCanvas(): HTMLCanvasElement\n    measureText(text: string, font?: string): { width: number }\n    loadImage(\n        src: string,\n        onload: () =&gt; void,\n        onerror: () =&gt; void\n    ): HTMLImageElement\n}) =&gt; void\n</code></pre>\n<p>设置平台相关的 API，在 NodeJS 等非浏览器平台的时候可能需要提供。</p>\n<ul>\n<li><code class=\"codespan\">createCanvas</code> 创建 Canvas 元素，主要用于测量文本宽度，在没提供<code class=\"codespan\">measureText</code>的时候需要提供。</li>\n<li><code class=\"codespan\">measureText</code> 测量文本宽度，默认会通过<code class=\"codespan\">createCanvas</code>得到 Canvas 元素提供的接口来测量文本宽度，也可以替换成更轻量的实现。</li>\n<li><code class=\"codespan\">loadImage</code> 加载图片，在使用 Canvas 渲染模式的时候并且使用 URL 作为图片的时候需要提供。</li>\n</ul>\n"},"graphic":{"type":["*"],"description":"<p>图形相关帮助方法。</p>\n","properties":{"extendShape":{"type":["Function"],"description":"<p>创建一个新的 shape class。</p>\n<pre><code class=\"lang-ts\">(\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-ts\">(\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-ts\">var MyShape = echarts.graphic.extendShape({\n    shape: {\n        x: 0,\n        y: 0,\n        width: 0,\n        height: 0\n    },\n    buildPath: function (ctx, shape) {\n        ctx.moveTo(shape.x, shape.y);\n        ctx.lineTo(shape.x + shape.width, shape.y);\n        ctx.lineTo(shape.x, shape.y + shape.height);\n        ctx.lineTo(shape.x + shape.width, shape.y + shape.height);\n        ctx.closePath();\n    }\n});\necharts.graphic.registerShape(&#39;myCustomShape&#39;, MyShape);\n\nvar option = {\n    series: {\n        type: &#39;custom&#39;,\n        coordinateSystem: &#39;none&#39;,\n        renderItem: function (params, api) {\n            return {\n                type: &#39;myCustomShape&#39;,\n                shape: {\n                    x: api.value(0),\n                    y: api.value(1),\n                    width: api.value(2),\n                    height: api.value(3)\n                },\n                style: {\n                    fill: &#39;red&#39;\n                }\n            };\n        },\n        data: [[10, 20, 30, 40]]\n    }\n};\n</code></pre>\n"},"getShapeClass":{"type":["Function"],"description":"<p>得到一个 <a href=\"#echarts.graphic.registerShape\">注册</a> 好的 class。</p>\n<pre><code class=\"lang-ts\">(\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-ts\">(\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-ts\">(\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-ts\">(option: Object, notMerge?: boolean, lazyUpdate?: boolean)\nor\n(option: Object, opts?: {\n    notMerge?: boolean;\n    replaceMerge?: string | string[];\n    lazyUpdate?: boolean;\n})\n</code></pre>\n<p>设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 <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\n<p><strong>参数：</strong></p>\n<p>调用方式举例：</p>\n<pre><code class=\"lang-ts\">chart.setOption(option, notMerge, lazyUpdate);\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-ts\">chart.setOption(option, {\n    notMerge: ...,\n    lazyUpdate: ...,\n    silent: ...\n});\n</code></pre>\n<p>或者</p>\n<pre><code class=\"lang-ts\">chart.setOption(option, {\n    replaceMerge: [&#39;xAxis&#39;, &#39;yAxis&#39;, &#39;series&#39;]\n});\n</code></pre>\n<ul>\n<li><p><code class=\"codespan\">option</code>: <code class=\"codespan\">ECOption</code></p>\n<p>  图表的配置项和数据，具体见<a href=\"option.html\" target=\"_blank\">配置项手册</a>。</p>\n</li>\n<li><p>opts</p>\n<ul>\n<li><code class=\"codespan\">notMerge</code> 可选。是否不跟之前设置的 <code class=\"codespan\">option</code> 进行合并。默认为 <code class=\"codespan\">false</code>。即表示合并。合并的规则，详见 <strong>组件合并模式</strong>。如果为 <code class=\"codespan\">true</code>，表示所有组件都会被删除，然后根据新 <code class=\"codespan\">option</code> 创建所有新组件。</li>\n<li><code class=\"codespan\">replaceMerge</code> 可选。用户可以在这里指定一个或多个组件，如：<code class=\"codespan\">xAxis</code>, <code class=\"codespan\">series</code>，这些指定的组件会进行 &quot;replaceMerge&quot;。如果用户想删除部分组件，也可使用 &quot;replaceMerge&quot;。详见 <strong>组件合并模式</strong>。</li>\n<li><code class=\"codespan\">lazyUpdate</code> 可选。在设置完 <code class=\"codespan\">option</code> 后是否不立即更新图表，默认为 <code class=\"codespan\">false</code>，即同步立即更新。如果为 <code class=\"codespan\">true</code>，则会在下一个 animation frame 中，才更新图表。</li>\n<li><code class=\"codespan\">silent</code> 可选。阻止调用 <code class=\"codespan\">setOption</code> 时抛出事件，默认为 <code class=\"codespan\">false</code>，即抛出事件。</li>\n</ul>\n</li>\n</ul>\n<h4>组件合并模式</h4>\n\n<p>对于一种类型的组件（如：<code class=\"codespan\">xAxis</code>, <code class=\"codespan\">series</code>）：</p>\n<ul>\n<li>如果设置<code class=\"codespan\">opts.notMerge</code>为<code class=\"codespan\">true</code>，那么旧的组件会被完全移除，新的组件会根据<code class=\"codespan\">option</code>创建。</li>\n<li>如果设置<code class=\"codespan\">opts.notMerge</code>为<code class=\"codespan\">false</code>，或者没有设置 <code class=\"codespan\">opts.notMerge</code>：<ul>\n<li>如果在<code class=\"codespan\">opts.replaceMerge</code>里指定组件类型，这类组件会进行<code class=\"codespan\">替换合并</code>。</li>\n<li>否则，会进行<code class=\"codespan\">普通合并</code>。</li>\n</ul>\n</li>\n</ul>\n<p>什么是<code class=\"codespan\">普通合并</code>和<code class=\"codespan\">替换合并</code>？</p>\n<h5>普通合并</h5>\n\n<p>对于一种类型的组件（如：<code class=\"codespan\">xAxis</code>, <code class=\"codespan\">series</code>），新来的 <code class=\"codespan\">option</code> 中的每个“组件描述”（如：<code class=\"codespan\">{type: &#39;xAxis&#39;, id: &#39;xx&#39;, name: &#39;kk&#39;, ...}</code>）会被尽量合并到已存在的组件中。剩余的情况，会在组件列表尾部创建新的组件。整体规则细节如下：</p>\n<ul>\n<li>先依次对 <code class=\"codespan\">option</code> 中每个有声明 <code class=\"codespan\">id</code> 或者 <code class=\"codespan\">name</code> 的“组件描述”，寻找能匹配其 <code class=\"codespan\">id</code> 或者 <code class=\"codespan\">name</code> 的已有的组件，找到的话则合并。</li>\n<li>再依次对 <code class=\"codespan\">option</code> 中剩余的“组件描述”，寻找还未执行过前一条的已有组件，找到的话则合并。</li>\n<li>其他 <code class=\"codespan\">option</code> 中剩余的“组件描述”，用于在组件列表尾部创建新组件。</li>\n</ul>\n<p>特点：</p>\n<ul>\n<li>永远不会删除已存在的组件。也就是说，只支持增加，或者更新组件。</li>\n<li>组件的索引（componentIndex）永远不会改变。</li>\n<li>如果 <code class=\"codespan\">id</code> 和 <code class=\"codespan\">name</code> 没有在 <code class=\"codespan\">option</code> 中被指定（这是经常出现的情况），组件会按照它在 <code class=\"codespan\">option</code> 中的顺序一一合并到已有组件中。这种设定比较符合直觉。</li>\n</ul>\n<p>例子：</p>\n<pre><code class=\"lang-ts\">// 已有组件：\n{\n    xAxis: [\n        { id: &#39;m&#39;, interval: 5 },\n        { id: &#39;n&#39;, name: &#39;nnn&#39;, interval: 6 }\n        { id: &#39;q&#39;, interval: 7 }\n    ]\n}\n// 新来的 option ：\nchart.setOption({\n    xAxis: [\n        // id 没有指定。会寻找到第一个没有进行过合并的已有组件，进行合并。\n        // 即合并到 `id: &#39;q&#39;`。\n        { interval: 77 },\n        // id 没有指定。最终会创建新组件。\n        { interval: 88 },\n        // id 没有指定，但是 name 指定了。会被合并到已有的 `name: &#39;nnn&#39;` 组件。\n        { name: &#39;nnn&#39;, interval: 66 },\n        // id 指定了，会被合并到已有的 `id: &#39;m&#39;` 组件。\n        { id: &#39;m&#39;, interval: 55 }\n    ]\n});\n// 结果组件：\n{\n    xAxis: [\n        { id: &#39;m&#39;, interval: 55 },\n        { id: &#39;n&#39;, name: &#39;nnn&#39;, interval: 66 },\n        { id: &#39;q&#39;, interval: 77 },\n        { interval: 88 }\n    ]\n}\n</code></pre>\n<h5>替换合并</h5>\n\n<p>对于一种类型的组件（如：<code class=\"codespan\">xAxis</code>, <code class=\"codespan\">series</code>），只有 <code class=\"codespan\">option</code> 中指定了 <code class=\"codespan\">id</code> 并且已有组件中有此 <code class=\"codespan\">id</code> 时，已有组件会和 <code class=\"codespan\">option</code> 相应组件描述进行合并。否则，已有组件都会删除，新组件会被根据 <code class=\"codespan\">option</code> 创建。细节规则如下：</p>\n<ul>\n<li>先依次对 <code class=\"codespan\">option</code> 中每个有声明 <code class=\"codespan\">id</code> 的“组件描述”，寻找能匹配其 <code class=\"codespan\">id</code> 或者 <code class=\"codespan\">name</code> 的已有的组件，找到的话则合并。</li>\n<li>删除其他没匹配到的已有组件。</li>\n<li>依次对 <code class=\"codespan\">option</code> 中剩余的“组件描述”，创建新组件，填入刚因删除而空出来的位置上，或者增加到末尾。</li>\n</ul>\n<p>特点：</p>\n<ul>\n<li>与 <code class=\"codespan\">普通合并</code> 相比，支持了组件删除。</li>\n<li>已有组件的索引永远不会变。这是为了保证，<code class=\"codespan\">option</code> 或者 API 中的 index 引用（例如：<code class=\"codespan\">xAxisIndex: 2</code>）仍能正常一致得使用。</li>\n<li>整个处理过程结束后，可能存在一些“洞”，也就是说，在组件列表中的某些 index 上，并没有组件存在（被删除了）。但是这是可以被开发者预期和控制的。</li>\n</ul>\n<p>例子：</p>\n<pre><code class=\"lang-ts\">// 已有组件：\n{\n    xAxis: [\n        { id: &#39;m&#39;, interval: 5, min: 1000 },\n        { id: &#39;n&#39;, name: &#39;nnn&#39;, interval: 6, min: 1000 }\n        { id: &#39;q&#39;, interval: 7, min: 1000 }\n    ]\n}\n// 新来的 option :\nchart.setOption({\n    xAxis: [\n        { interval: 111 },\n        // id 已经指定了。因此会被合并进已有的组件 `id: &#39;q&#39;`。\n        { id: &#39;q&#39;, interval: 77 },\n        // id 已经指定了。但是已有组件没有此 id 。\n        { id: &#39;t&#39;, interval: 222 },\n        { interval: 333 }\n    ]\n}, { replaceMerge: &#39;xAxis&#39; });\n// 结果组件：\n{\n    xAxis: [\n        // 原来的 id 为 &#39;m&#39; 的组件，被移除。\n        // 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。\n        { interval: 111 },\n        // 原来的 id 为 &#39;n&#39; 的组件，被移除。\n        // 替换为新的组件。新组件中，并没有原来的 `min: 1000` 了。\n        { id: &#39;t&#39;, interval: 222 },\n        // 原来的组件没有被移除，而是和 option 中的组件描述进行了合并。\n        // 所以 `min: 1000` 被保留了。\n        { id: &#39;q&#39;, interval: 77, min: 1000 },\n        // 新添加的组件。\n        { interval: 333 }\n    ]\n}\n</code></pre>\n<h5>删除组件</h5>\n\n<p>有两种方法能删除组件：</p>\n<ul>\n<li>删除所有：使用 <code class=\"codespan\">notMerge: true</code>，则所有组件都被删除。</li>\n<li>删除部分：使用 <code class=\"codespan\">replaceMerge: [...]</code>，被指定的组件类型，会根据 replaceMerge 的规则：如果 id 匹配就合并（ merge ），否则旧组件被删除，新组件被创建。“部分删除” 有助于，在删除该删除的组件时，保留其他组件的状态（如高亮、动画、选中状态）。</li>\n</ul>\n"},"getWidth":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">() =&gt; number\n</code></pre>\n<p>获取 ECharts 实例容器的宽度。</p>\n"},"getHeight":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">() =&gt; number\n</code></pre>\n<p>获取 ECharts 实例容器的高度。</p>\n"},"getDom":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">() =&gt; HTMLCanvasElement|HTMLDivElement\n</code></pre>\n<p>获取 ECharts 实例容器的 dom 节点。</p>\n"},"getOption":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">() =&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-ts\">{\n    title: [{...}],\n    legend: [{...}],\n    grid: [{...}]\n}\n</code></pre>\n<p>另外<strong>不推荐</strong>下面这种写法：</p>\n<pre><code class=\"lang-ts\">var option = myChart.getOption();\noption.visualMap[0].inRange.color = ...;\nmyChart.setOption(option);\n</code></pre>\n<p>因为 <code class=\"codespan\">getOption</code> 获取的是已经合并过默认值了的，所以在修改了某些配置项后会导致原本是根据这些配置项值去设置的默认值失效。</p>\n<p>因此我们更<strong>推荐</strong>通过<code class=\"codespan\">setOption</code>去修改部分配置。</p>\n<pre><code class=\"lang-ts\">myChart.setOption({\n    visualMap: {\n        inRange: {\n            color: ...\n        }\n    }\n})\n</code></pre>\n"},"resize":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(opts?: {\n    width?: number|string,\n    height?: number|string,\n    silent?: boolean,\n    animation?: {\n        duration?: number\n        easing?: string\n    }\n}) =&gt; ECharts\n</code></pre>\n<p>改变图表尺寸，在容器大小发生改变时需要手动调用。</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><code class=\"codespan\">width</code> 可显式指定实例宽度，单位为像素。如果传入值为 <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>，则表示自动取 <code class=\"codespan\">dom</code>（实例容器）的宽度。</li>\n<li><code class=\"codespan\">height</code> 可显式指定实例高度，单位为像素。如果传入值为 <code class=\"codespan\">null</code>/<code class=\"codespan\">undefined</code>/<code class=\"codespan\">&#39;auto&#39;</code>，则表示自动取 <code class=\"codespan\">dom</code>（实例容器）的高度。</li>\n<li><code class=\"codespan\">silent</code> 是否禁止抛出事件。默认为 <code class=\"codespan\">false</code>。</li>\n<li><code class=\"codespan\">animation</code> resize 的时候是否应用过渡动画，包含时长<code class=\"codespan\">duration</code>和缓动<code class=\"codespan\">easing</code>两个配置，默认<code class=\"codespan\">duration</code>为 0，即不应用过渡动画。</li>\n</ul>\n</li>\n</ul>\n<p><strong>Tip:</strong> 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 <code class=\"codespan\">resize</code> 方法获取正确的高宽并且刷新画布，或者在 <code class=\"codespan\">opts</code> 中显示指定图表高宽。</p>\n"},"renderToSVGString":{"type":["Function"],"description":"<blockquote>\n<p>从 <code class=\"codespan\">5.3.0</code> 开始支持</p>\n</blockquote>\n<pre><code class=\"lang-ts\">(opts?: {\n    useViewBox?: boolean\n}) =&gt; string\n</code></pre>\n<p>渲染得到 SVG 字符串。在设置<code class=\"codespan\">renderer: &#39;svg&#39;</code>使用 SVG 渲染模式有效。</p>\n<p>如果在<code class=\"codespan\">echarts.init</code>的时候通过<code class=\"codespan\">ssr</code>参数开启了服务端渲染模式</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><code class=\"codespan\">useViewBox</code> 是否在生成的 SVG 字符串中带入 <a href=\"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/viewBox\" target=\"_blank\">viewBox</a></li>\n</ul>\n</li>\n</ul>\n"},"dispatchAction":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(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-ts\">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-ts\">(\n    eventName: string,\n    handler: Function,\n    context?: Object\n)\n(\n    eventName: string,\n    query: string|Object,\n    handler: Function,\n    context?: Object\n)\n</code></pre>\n<p>绑定事件处理函数。</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-ts\">  chart.on(&#39;click&#39;, &#39;series&#39;, function () {...});\n  chart.on(&#39;click&#39;, &#39;series.line&#39;, function () {...});\n  chart.on(&#39;click&#39;, &#39;xAxis.category&#39;, function () {...});\n</code></pre>\n<p>  如果为 <code class=\"codespan\">Object</code>，可以包含以下一个或多个属性，每个属性都是可选的：</p>\n<pre><code class=\"lang-ts\">  {\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-ts\">  chart.setOption({\n      // ...\n      series: [{\n          name: &#39;uuu&#39;\n          // ...\n      }]\n  });\n  chart.on(&#39;mouseover&#39;, {seriesName: &#39;uuu&#39;}, function () {\n      // series name 为 &#39;uuu&#39; 的系列中的图形元素被 &#39;mouseover&#39; 时，此方法被回调。\n  });\n</code></pre>\n<p>  例如：</p>\n<pre><code class=\"lang-ts\">  chart.setOption({\n      // ...\n      series: [{\n          // ...\n      }, {\n          // ...\n          data: [\n              {name: &#39;xx&#39;, value: 121},\n              {name: &#39;yy&#39;, value: 33}\n          ]\n      }]\n  });\n  chart.on(&#39;mouseover&#39;, {seriesIndex: 1, name: &#39;xx&#39;}, function () {\n      // series index 1 的系列中的 name 为 &#39;xx&#39; 的元素被 &#39;mouseover&#39; 时，此方法被回调。\n  });\n</code></pre>\n<p>  例如：</p>\n<pre><code class=\"lang-ts\">  chart.setOption({\n      // ...\n      series: [{\n          type: &#39;graph&#39;,\n          nodes: [{name: &#39;a&#39;, value: 10}, {name: &#39;b&#39;, value: 20}],\n          edges: [{source: 0, target: 1}]\n      }]\n  });\n  chart.on(&#39;click&#39;, {dataType: &#39;node&#39;}, function () {\n      // 关系图的节点被点击时此方法被回调。\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-ts\">  chart.setOption({\n      // ...\n      series: {\n          // ...\n          type: &#39;custom&#39;,\n          renderItem: function (params, api) {\n              return {\n                  type: &#39;group&#39;,\n                  children: [{\n                      type: &#39;circle&#39;,\n                      name: &#39;my_el&#39;,\n                      // ...\n                  }, {\n                      // ...\n                  }]\n              }\n          },\n          data: [[12, 33]]\n      }\n  })\n  chart.on(&#39;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-ts\">  (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-ts\">(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-ts\">(\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|number\n    // 转换的结果为像素坐标值，以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。\n) =&gt; Array|number\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-ts\">// [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-ts\">// [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-ts\">// 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-ts\">// 因为每个 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-ts\">// 使用第一个系列对应的坐标系：\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-ts\">(\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|number\n    // 转换的结果，为逻辑坐标值。\n) =&gt; Array|number\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-ts\">(\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-ts\">// 判断 [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-ts\">(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-ts\">default: {\n  text: &#39;loading&#39;,\n  color: &#39;#c23531&#39;,\n  textColor: &#39;#000&#39;,\n  maskColor: &#39;rgba(255, 255, 255, 0.8)&#39;,\n  zlevel: 0,\n\n  // 字体大小。从 `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  // 字体粗细。从 `v5.0.1` 开始支持。\n  fontWeight: &#39;normal&#39;,\n  // 字体风格。从 `v5.0.1` 开始支持。\n  fontStyle: &#39;normal&#39;,\n  // 字体系列。从 `v5.0.1` 开始支持。\n  fontFamily: &#39;sans-serif&#39;\n}\n</code></pre>\n</li>\n</ul>\n"},"hideLoading":{"type":["Function"],"description":"<p>隐藏动画加载效果。</p>\n"},"getDataURL":{"type":["Function"],"description":"<pre><code class=\"lang-ts\">(opts: {\n    // 导出的格式，可选 png, jpg, svg\n    // 注意：png, jpg 只有在 canvas 渲染器的时候可使用，svg 只有在使用 svg 渲染器的时候可用\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-ts\">var img = new Image();\nimg.src = myChart.getDataURL({\n    pixelRatio: 2,\n    backgroundColor: &#39;#fff&#39;\n});\n</code></pre>\n"},"getConnectedDataURL":{"type":["*"],"description":"<pre><code class=\"lang-ts\">(opts: {\n    // 导出的格式，可选 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-ts\">(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-ts\">() =&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<pre><code class=\"lang-ts\">// 如果要高亮系列：\ndispatchAction({\n    type: &#39;highlight&#39;,\n\n    // 用 index 或 id 或 name 来指定系列。\n    // 可以使用数组指定多个系列。\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项\n    dataIndex?: number | number[],\n    // 可选，数据项名称，在有 dataIndex 的时候忽略\n    name?: string | string[],\n});\n\n// 如果要高亮 geo 组件（从 `v5.1.0` 开始支持）：\ndispatchAction({\n    type: &#39;highlight&#39;,\n\n    // 用 index 或 id 或 name 来指定 geo 组件。\n    // 可以用数组指定多个 geo 组件。\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n    // geo 组件中 region 名称。\n    // 可以是一个数组指定多个名称。\n    name?: string | string[],\n});\n</code></pre>\n"},"downplay":{"type":["Action"],"description":"<p>取消高亮指定的数据图形。</p>\n<pre><code class=\"lang-ts\">// 如果要取消高亮系列：\ndispatchAction({\n    type: &#39;downplay&#39;,\n\n    // 用 index 或 id 或 name 来指定系列。\n    // 可以使用数组指定多个系列。\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项\n    dataIndex?: number | number[],\n    // 可选，数据项名称，在有 dataIndex 的时候忽略\n    name?: string | string[],\n})\n\n// 如果要取消高亮 geo 组件（从 `v5.1.0` 开始支持）：\ndispatchAction({\n    type: &#39;downplay&#39;,\n\n    // 用 index 或 id 或 name 来指定 geo 组件。\n    // 可以用数组指定多个 geo 组件。\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n    // geo 组件中 region 名称。\n    // 可以是一个数组指定多个名称。\n    name?: string | string[],\n});\n</code></pre>\n"},"select":{"type":["Action"],"description":"<p>选中指定的数据。选中数据会使用 <a href=\"option.html#series-bar.select\" target=\"_blank\">select</a> 配置的样式。</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;select&#39;,\n\n    // 用 index 或 id 或 name 来指定系列。\n    // 可以使用数组指定多个系列。\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项\n    dataIndex?: number | number[],\n    // 可选，数据项名称，在有 dataIndex 的时候忽略\n    name?: string | string[],\n})\n</code></pre>\n"},"unselect":{"type":["Action"],"description":"<p>取消选中指定的数据。</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;unselect&#39;,\n\n    // 用 index 或 id 或 name 来指定系列。\n    // 可以使用数组指定多个系列。\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项\n    dataIndex?: number | number[],\n    // 可选，数据项名称，在有 dataIndex 的时候忽略\n    name?: string | string[],\n})\n</code></pre>\n"},"toggleSelected":{"type":["Action"],"description":"<p>切换选中状态</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;toggleSelected&#39;,\n\n    // 用 index 或 id 或 name 来指定系列。\n    // 可以使用数组指定多个系列。\n    seriesIndex?: number | number[],\n    seriesId?: string | string[],\n    seriesName?: string | string[],\n\n    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项\n    dataIndex?: number | number[],\n    // 可选，数据项名称，在有 dataIndex 的时候忽略\n    name?: string | string[],\n})\n</code></pre>\n"},"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-ts\">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-ts\">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-ts\">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-ts\">dispatchAction({\n    type: &#39;legendAllSelect&#39;\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendselectall\">legendselectall</a></p>\n"},"legendInverseSelect":{"type":["Action"],"description":"<p>将图例反选。</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;legendInverseSelect&#39;\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendinverseselect\">legendinverseselect</a></p>\n"},"legendScroll":{"type":["Action"],"description":"<p>控制图例的滚动。当 <a href=\"option.html#legend.type\" target=\"_blank\">legend.type</a> 为 <code class=\"codespan\">&#39;scroll&#39;</code> 时有效。</p>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;legendScroll&#39;,\n    scrollDataIndex: number,\n    legendId: string\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.legendscroll\">legendscroll</a></p>\n"}}},"tooltip":{"type":["*"],"description":"<p><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-ts\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // 屏幕上的 x 坐标\n    x: number,\n    // 屏幕上的 y 坐标\n    y: number,\n    // 本次显示 tooltip 的位置。只在本次 action 中生效。\n    // 缺省则使用 option 中定义的 tooltip 位置。\n    position: number[] | string | Function,\n})\n</code></pre>\n<p>2 指定系列中的数据图形，根据 tooltip 的配置项显示提示框。</p>\n<pre><code class=\"lang-ts\">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: number[] | string | Function,\n})\n</code></pre>\n<p>3 指定 geo 组件中的 region 名，根据 tooltip 的配置项显示提示框。</p>\n<blockquote>\n<p>从 <code class=\"codespan\">v5.1.0</code> 开始支持</p>\n</blockquote>\n<pre><code class=\"lang-ts\">dispatchAction({\n    type: &#39;showTip&#39;,\n    // 用 index 或 id 或 name 来指定 geo 组件。\n    // 可以用数组指定多个 geo 组件。\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n    // geo 组件中 region 名称。\n    name?: string,\n    // 本次显示 tooltip 的位置。只在本次 action 中生效。\n    // 缺省则使用 option 中定义的 tooltip 位置。\n    position: number[] | 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-ts\">dispatchAction({\n    type: &#39;hideTip&#39;\n})\n</code></pre>\n"}}},"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-ts\">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-ts\">myChart.dispatchAction({\n    type: &#39;takeGlobalCursor&#39;,\n    key: &#39;dataZoomSelect&#39;,\n    // 启动或关闭\n    dataZoomSelectActive: true\n});\n</code></pre>\n"}}},"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-ts\">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-ts\">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":{"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-ts\">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-ts\">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":{"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-ts\">dispatchAction({\n    type: &#39;restore&#39;\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.restore\">restore</a></p>\n"}}},"geo":{"type":["*"],"description":"<p><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-ts\">dispatchAction({\n    type: &#39;geoSelect&#39;,\n\n    // 用 index 或 id 或 name 来指定 geo 组件。\n    // 可以用数组指定多个 geo 组件。\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n    // geo 组件中 region 名称。\n    // 可以是一个数组指定多个名称。\n    name?: string | 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-ts\">dispatchAction({\n    type: &#39;geoUnSelect&#39;,\n\n    // 用 index 或 id 或 name 来指定 geo 组件。\n    // 可以用数组指定多个 geo 组件。\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n    // geo 组件中 region 名称。\n    // 可以是一个数组指定多个名称。\n    name?: string | 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-ts\">dispatchAction({\n    type: &#39;geoToggleSelect&#39;,\n\n    // 用 index 或 id 或 name 来指定 geo 组件。\n    // 可以用数组指定多个 geo 组件。\n    geoIndex?: number | number[],\n    geoId?: string | string[],\n    geoName?: string | string[],\n\n    // geo 组件中 region 名称。\n    // 可以是一个数组指定多个名称。\n    name?: string | string[],\n})\n</code></pre>\n<p><strong>EVENT:</strong> <a href=\"#events.geoselectchanged\">geoselectchanged</a></p>\n"}}},"brush":{"type":["*"],"description":"<p><a href=\"option.html#brush\" target=\"_blank\">区域选择</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-ts\">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-ts\">myChart.on(&#39;click&#39;, function (params) {\n    console.log(params);\n});\n\nmyChart.on(&#39;legendselectchanged&#39;, function (params) {\n    console.log(params);\n});\n\nchart.on(&#39;click&#39;, &#39;series.line&#39;, function (params) {\n    console.log(params);\n});\n\nchart.on(&#39;mouseover&#39;, {seriesIndex: 1, name: &#39;xx&#39;}, function (params) {\n    console.log(params);\n});\n</code></pre>\n<p>详细的事件注册方式参见 <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-ts\">{\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=\"https://echarts.apache.org/handbook/zh/concepts/event\" 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":""}}},"highlight":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.highlight\">highlight</a></p>\n<p>高亮事件。</p>\n"},"downplay":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.downplay\">downplay</a></p>\n<p>取消高亮事件。</p>\n"},"selectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.toggleSelected\">toggleSelected</a>, <a href=\"#action.select\">select</a>, <a href=\"#action.unselect\">unselect</a></p>\n<p>在数据选中状态发生变化时触发的事件</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;selectchanged&#39;,\n    fromAction: &#39;select&#39; | &#39;toggleSelected&#39; | &#39;unselect&#39;,\n    // 按系列分组的选中项列表\n    selected: ({\n        dataIndex: number[], seriesIndex: number\n    })[]\n}\n</code></pre>\n"},"legendselectchanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendToggleSelect\">legendToggleSelect</a>\n切换图例选中状态后的事件。</p>\n<p><strong>注：</strong>图例组件用户切换图例开关会触发该事件。</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendselectchanged&#39;,\n    // 切换的图例名称\n    name: string\n    // 所有图例的选中状态表\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n"},"legendselected":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendSelect\">legendSelect</a>\n图例选中后的事件。</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendselected&#39;,\n    // 选中的图例名称\n    name: string\n    // 所有图例的选中状态表\n    selected: {\n        [name: string]: boolean\n    }\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-ts\">{\n    type: &#39;legendunselected&#39;,\n    // 取消选中的图例名称\n    name: string\n    // 所有图例的选中状态表。\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n"},"legendselectall":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendAllSelect\">legendAllSelect</a>\n图例全选后的事件。</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendselectall&#39;,\n    // 所有图例的选中状态表。\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n"},"legendinverseselect":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendInverseSelect\">legendInverseSelect</a>\n图例反选后的事件。</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendinverseselect&#39;,\n    // 所有图例的选中状态表。\n    selected: {\n        [name: string]: boolean\n    }\n}\n</code></pre>\n"},"legendscroll":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.legend.legendScroll\">legendscroll</a>\n图例滚动事件。</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;legendscroll&#39;,\n    scrollDataIndex: number\n    legendId: string\n}\n</code></pre>\n"},"datazoom":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.dataZoom.dataZoom\">dataZoom</a></p>\n<p>数据区域缩放后的事件。</p>\n<pre><code class=\"lang-ts\">{\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-ts\">{\n    type: &#39;datarangeselected&#39;,\n    // 连续型 visualMap 和 离散型 visualMap 不一样\n    // 连续型的是一个表示数值范围的数组。\n    // 离散型的是一个对象，键值是类目或者分段的索引。值是`true`或`false`\n    selected: Object|Array\n}\n</code></pre>\n"},"graphroam":{"type":["Event"],"description":"<p>关系图 <a href=\"option.html#series-graph\" target=\"_blank\">series-graph</a> 的缩放和平移漫游事件。</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;graphroam&#39;,\n    seriesId: string,\n    zoom: number, // 单次缩放倍数\n    originX: number,\n    originY: number\n}\n</code></pre>\n"},"georoam":{"type":["Event"],"description":"<p>地理坐标系 <a href=\"option.html#geo\" target=\"_blank\">geo</a> 的缩放和平移漫游事件。</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;georoam&#39;,\n    componentType: &#39;geo&#39; | &#39;series&#39;,\n    seriesId: string,\n    zoom: number, // 单次缩放倍数\n    originX: number,\n    originY: number\n}\n</code></pre>\n"},"treeroam":{"type":["Event"],"description":"<p>树图 <a href=\"option.html#series-tree\" target=\"_blank\">series-tree</a> 的缩放和平移漫游事件。</p>\n<p><code class=\"codespan\">treeroam</code> 事件包括两种，其中一种是平移，事件参数为：</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;treeroam&#39;,\n    seriesId: string,\n    dx: number,\n    dy: number\n}\n</code></pre>\n<p>另一种是缩放，参数为：</p>\n<pre><code class=\"lang-ts\">{\n    type: &#39;treeroam&#39;,\n    seriesId: string,\n    zoom: number, // 单次缩放倍数\n    originX: number,\n    originY: number\n}\n</code></pre>\n"},"timelinechanged":{"type":["Event"],"description":"<p><strong>ACTION:</strong> <a href=\"#action.timeline.timelineChange\">timelineChange</a>\n时间轴中的时间点改变后的事件。</p>\n<pre><code class=\"lang-ts\">{\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-ts\">{\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-ts\">{\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-ts\">{\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-ts\">{\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-ts\">{\n    type: &#39;geoselectchanged&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string,\n    // 数据名称\n    name: name,\n    // 每个 geo 组件的选中信息列表。\n    // allSelected 从 `v5.1.0` 开始支持\n    allSelected: ({\n        geoIndex: number\n        // 每个 geo 组件上选中的名称列表。\n        name: string[]\n    })[],\n    // 不推荐使用此属性。\n    // 所有数据的选中状态表。\n    // 不同 geo 组件的状态会被合并在一起。\n    selected: {\n        [name: string]: boolean\n    }\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-ts\">{\n    type: &#39;geoselected&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: {\n        [name: string]: boolean\n    }\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-ts\">{\n    type: &#39;geounselected&#39;,\n    // 系列 ID，可以在 option 中传入\n    seriesId: string\n    // 数据名称\n    name: name,\n    // 所有数据的选中状态表。\n    selected: {\n        [name: string]: boolean\n    }\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"},"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=\"option.html#animation\" target=\"_blank\">animation</a> 相关配置）或者渐进渲染（参见 <a href=\"option.html#series-scatter.progressive\" target=\"_blank\">progressive</a> 相关配置）停止，只代表本帧的渲染结束。</p>\n<p>例如：</p>\n<pre><code class=\"lang-ts\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on(&#39;rendered&#39;, function () {\n    snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n"},"finished":{"type":["Event"],"description":"<p>渲染完成事件。当渲染动画（参见 <a href=\"option.html#animation\" target=\"_blank\">animation</a> 相关配置）或者渐进渲染（参见 <a href=\"option.html#series-scatter.progressive\" target=\"_blank\">progressive</a> 相关配置）停止时触发。</p>\n<pre><code class=\"lang-ts\">var snapshotImage = new Image();\ndocument.body.append(snapshotImage);\nchart.on(&#39;finished&#39;, function () {\n    snapshotImage.src = chart.getDataURL();\n});\n</code></pre>\n<p>注意：建议在调用 <code class=\"codespan\">setOption</code> 前注册相关事件，否则在动画被禁用时，注册的事件回调可能因时序问题而不被执行。</p>\n<pre><code class=\"lang-ts\">var option = {\n    // ...\n    animation: false\n    // ...\n};\nchart.on(&#39;finished&#39;, function () {\n    // ...  \n});\nchart.setOption(option);\n</code></pre>\n"}}}}}}